axios-框架

现在网路请求主要有以下几种方式：

1）传统的Ajax是基于XMLHttpRequest(XHR)：配置和调用方式等非常混乱，操作复杂

2）jQuery-Ajax ：重量级框架，不适合 vue.js 开发的项目

3）axios：轻量，支持 Promise API ，可以在 node.js 中发送 http请求等等

1- axios 请求方式

支持多种请求方式:
axios(config) ----- 通过 method 去指定请求方式，post / get
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

发送get请求

// 请求没有参数
axios.get('http://123.207.32.32:8000/category')
    .then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })

// 2. 有请求参数
axios.get('http://123.207.32.32:8000/home/data', {
    params: {
        type: 'sell',
        page: 1
    }
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

发送并发请求

有时候 , 我们可能需求同时发送两个请求，使用axios.all, 可以放入多个请求的数组。
axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

axios.all([axios.get('http://123.207.32.32:8000/category'),
    axios.get('http://123.207.32.32:8000/home/data', { params: { type: 'sell', page: 1 } })
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))

2- axios 全局配置

axios 的请求里面一些参数是固定的，比如 BaseURL ，可以将这些固定的属性抽离出来，放在 axios 的全局配置里面。

// axios 全局设置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000 //单位是 ms

axios.get('/category')
    .then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })

请求类型为 get 时，参数放在 params 里面，拼接在 URL 后面。请求对象为 post 的时候，参数放在 request body 里面。

axios 实例

为什么要创建 axios 的实例呢?

当我们从 axios 模块中导入对象时, 使用的实例是默认的实例，在这个实例上设置默认配置是固定的，不能修改了。但是在开发中，某些配置是需要改变的。比如 BaseUrl 会随着服务器地址的不同而改变，并不是唯一的。所以，我们需要创建新的实例, 并且传入属于该实例的配置信息。

// 创建新的实例
const axiosInstance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})

// 发送网络请求
axiosInstance({
    url: '/category',
    method: 'get'
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

axios 封装

考虑到 axios 是一个第三方框架，我们需要将 axios 封装起来，哪里需要哪里导入就好。在 src 下新建一个 network 文件夹，用来存放与网络相关的代码

// 方法三 axios 里面封装的有 promise 所以可以直接返回一个 axios 实例 
export function request(options) {

    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })
    return instance(options)
}

---- main.js ---
    
// 方法三 接收返回的 promise 对象
request({
    url: '/category'
}).then(res => console.log(res)).catch(err => console.log(err))

3- axios 拦截器

拦截器分为请求拦截和响应拦截。

    // 请求拦截器 
    // instance.interceptors.request.use(拦截成功函数，拦截失败函数)
    instance.interceptors.request.use(config => {
            console.log('request 拦截成功');
        
            // 拦截成果之后需要返回 config
            return config
        }, err => {
            console.log('request 拦截失败');
            return err
        })
        
        // 响应拦截器
    instance.interceptors.response.use(config => {
        console.log('response success!');
        return config.data
    }, err => {
        console.log('response failed');
        return err
    })

请求拦截的作用

请求成功的拦截：1.比如 config 中的一些信息不符合服务器的要求，可以拦截。2.比如每次发送网络请求的时候，希望在界面中显示一个请求的图标。3.某些网络请求（比如登录（token）），必须携带一些特殊的信息。…

请求拦截中错误拦截较少，通常都是配置相关的拦截。可能的错误比如请求超时，可以将页面跳转到一个错误页面中。

响应拦截的作用

响应的成功拦截中，主要是对数据进行过滤

响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。

本文地址：https://blog.csdn.net/weixin_44381527/article/details/107490517