axios模块封装

axios模块封装

  • 创建一个network文件夹
    • 创建一个request.js文件
    • 创建一个main.js文件

request.js

import axios from ‘axios‘

export function request(config) {
    //1.创建axios的实例
    const instance = axios.create({
        timeout: 5000//超时设置
    })

    //2.axios拦截器
    //2.1请求拦截的作用
    axios.interceptors.request.use(config => {
        console.log(config)
        //1.比如说config中的一些信息不符合服务器的要求
        //2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
        //3.某些网络请求(比如登陆(token)),必须携带一些特殊的信息
        return config
    }, err => {
        console.log(err)
    })

    //2.2 响应拦截的作用
    axios.interceptors.response.use(res => {
        console.log(res)
    }, err => {
        console.log(err)
    })

    //3.发送真正的网络请求
    return instance(config)
}

main.js

import {request} from ‘./request‘

export function 函数名(){
    return request({
        url: ‘请求地址‘
    })
}

使用

函数名()
        .then(res => {
           console.log(res)
        })
        .catch(

        );

常见的配置选项

  • 请求地址

    • url: ‘/user‘
  • 请求类型,默认get

    • methods: ‘get‘
  • 请求根路径

    • baseURL: ‘http://www.aaa.com/api‘
  • 请求前的数据处理

    • transformRequest: [function(data) {}]
  • 自定义的请求头

    • headers: {‘x-Requested-With‘: ‘XMLHttpRequest‘}
  • URL查询对象(get请求)

    • params: {name: lazy}
  • 查询对象序列化函数

    • paramsSerializer: function(params){}
  • request body(post请求)

    • data: {name: lazy}
  • 超时设置(s)

    • timeout: 1000
  • 跨域是否带Token

    • withCredentials: false
  • 自定义请求处理

    • adapter: function(resolve, reject, config){}
  • 身份验证信息

    • auth: {uname: ‘‘, pwd: ‘12‘}
  • 响应的数据格式

    • responseType: ‘json‘

axios模块封装

上一篇:Session会话(超详细)


下一篇:你真的了解 Cookie 和 Session 吗?