axios

安装

npm install axios -S

导入

import axios from 'axios'

方法

请求	备注
axios.get(url[config])	GET请求
axios.delete(url[config])	DELETE请求
axios.head(url[config])	HEAD请求
axios.options(url[config])	OPTIONS请求
axios.post(url[data[config]])	POST请求
axios.put(url[data[config]])	PUT请求
axios.patch(url[data[config]])	PATCH请求
config	选项配置。例如：查询参数，请求头…
data	请求体数据。最常见的是json格式数据
get、head	这两种请求无法携带请求体
options、delete	请求可以通过config中的data携带请求体

实战

异步

async fetchData() {
    axios.get('/api/user/list').then((res) => {
        console.log(res.data)
    })
}

同步

async fetchData() {
    const resp = await axios.get('/api/user/list')
    console.log(resp)
}

发送查询参数，携带请求头数据

async fetchData() {
    const resp = await axios.post(
        '/api/postHeader',
        {},
        {
            headers: {
                Authorization: 'token',
            },
        }
    )
    console.log(resp)
}

发送查询参数，特殊字符手动解析

async fetchData() {
    const name = encodeURIComponent('&&&')
    const age = 21
    const res = await axios.get(
        `/api/getParams?name=${name}&age=${age}`
    )
    console.log(res.data)
}

发送查询参数，特殊字符自动解析

async fetchData() {
    const res = await axios.get('/api/getParams', {
        params: {
            name: '&&&',
            age: 20,
        },
    })
    console.log(res.data)
}

使用请求体发送数据，格式为urlencoded

async fetchData() {
    const params = new URLSearchParams()
    params.append('name', 'zs')
    params.append('age', 20)
    const res = await axios.post('/api/getParamsPost', params)
    console.log(res.data)
}

使用请求体发送数据,格式为multipart

async fetchData() {
    const params = new FormData()
    params.append('name', 'ly')
    params.append('age', 25)
    const res = await axios.post('/api/getParamsPost', params)
    console.log(res.data)
}

使用请求体发送数据,格式为JSON

// JSON.stringify()
async fetchData() {
    const o = {
        name: '&&&',
        age: 20,
    }
    const res = await axios.post('/api/getJSONPost', o)
    console.log(res.data)
}

自定义axios实例

前面我们使用的是axios的默认配置项

下面我们手动创建axios实例，并指定相关配置项，覆盖默认的配置项

const _axios = axios.create(config)

名称	含义
baseUrl	将自动加载url前面
headers	请求头，类型为简单对象
params	跟在url后面的参数，类型为简单的对象或URLSearchParams
data	请求体，类型有简单对象、FromData、URLSearchParams、File等
withCredentials	跨域时是否携带Cookie等凭证，默认为false
responseType	响应类型，默认为json

配置

const _axios = axios.create({
    baseURL:'/api',
    headers:{}
});
const res = _axios.get("/students", {
    name: 'zs',
    age: 19
});
console.log(res)

axios的拦截器

请求拦截器

const _axios = axios.create({
        baseURL: '/api',
        headers: {}
      });
_axios.interceptors.request.use(
    // 请求正常执行的函数
    config => {
        config.headers={
            Authorization:'x.y.z'
        }
        return config;
    },
    // 请求异常执行的函数
    error => {
        return Promise.reject(error)
    }
)

响应拦截器

axios.interceptors.response.use(
    // 响应正常执行的函数
    resp => {
    return resp
},
// 响应异常执行的函数
error => {
    if(error.response.status === 401){
        console.log("aaaa")
        return Promise.resolve(400); // 处理异常
    }
    // ......
    return Promise.reject(error)
}
)

抽取通用的axios配置

import axios from 'axios'
const _axios = axios.create({
    // baseURL: 'http://localhost:8080',
    withCredentials: true
});

拦截器
_axios.interceptors.request.use(
    function (config) {
        // 比如在这里添加统一的 headers
        config.headers = {
            Authorization: 'aaa.bbb.ccc'
        }
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);
_axios.interceptors.response.use(
    function (response) {
        // 2xx 范围内走这里
        return response;
    },
    function (error) {
        if (error.response?.status === 400) {
            console.log('请求参数不正确');
            return Promise.resolve(400);
        } else if (error.response?.status === 401) {
            console.log('跳转至登录页面');
            return Promise.resolve(401);
        } else if (error.response?.status === 404) {
            console.log('资源未找到');
            return Promise.resolve(404);
        }
        // 超出 2xx, 比如 4xx, 5xx 走这里
        return Promise.reject(error);
    }
);
export default _axios;