axios 框架

2020-07-20

wangluo 传统的Ajax是基于XMLHttpRequest(XHR)、jQuery-Ajax、axios

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

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

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

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 文件夹，用来存放与网络相关的代码。封装一个 request 函数，创建 axios 实例，设置拦截器，返回实例（内含 Promise 对象）。

// 方法三 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判断报错的错误码，跳转到不同的错误提示页面。