网络模块封装

网络模块封装

Vue中发送网络请求有非常多的方式, 在开发中, 如何选择?

1.传统的Ajax

传统的Ajax是基于XMLHttpRequest(XHR)
缺点：
1.配置和调用方式等非常混乱.
2.编码起来看起来繁琐复杂
3.所以真实开发中很少直接使用, 而是使用jQuery-Ajax

2.jQuery-Ajax

jQuery-Ajax相对于传统的Ajax非常好用.
但是：
1.在Vue的整个开发中都是不需要使用jQuery了.

jQuery的代码1w+行.
Vue的代码才1w+行.

2.完全没有必要为了用网络请求就引用这个重量级的框架.

3.Vue-resource

Vue-resource的体积相对于jQuery小很多，另外Vue-resource是官方推出的。
但是：
1.在Vue2.0退出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource, 并且以后也不会再更新.
2.意味着以后vue-reource不再支持新的版本时, 也不会再继续更新和维护.
3.对以后的项目开发和维护都存在很大的隐患.

4.axios

axios有非常多的优点
1.在浏览器中发送 XMLHttpRequests 请求
2.在 node.js 中发送 http请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求和响应数据

axiox请求方式

支持多种请求方式:

axios(config)
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]])

使用示例：

import axios from 'axios'

axios({
    url: 'http:123123.123.123'
}).then(res => {
    console.log(res);
})

axios({
    url: 'http:123123.123.123',
    params: {
        type: 'pop', 
        page: 1
    }
}).then(res => {
    console.log(res);
})

发送并发请求

有时候, 我们可能需求同时发送两个请求

使用axios.all, 可以放入多个请求的数组.

axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

axios.all([
    axios({ url: 'http://123.123' }),
    axios({
        url: 'http://123.123',
        params: {
            type: 'pop',
            page: 1
        }
    })
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))

全局配置

上面示例中, 我们的BaseURL是固定的

事实上, 在开发中可能很多参数都是固定的

这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置

axios.defaults.baseURL = 'http://123.123'

axios.all([
    axios({ url: '/home/multidata' }),
    axios({
        url: '/home/data',
        params: {
            type: 'pop',
            page: 1
        }
    })
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);

}))

常见的配置选项

请求地址
url: '/user',

请求类型
method: 'get',

请根路径
baseURL: 'http://www.mt.com/api',

请求前的数据处理
transformRequest:[function(data){}],

请求后的数据处理
transformResponse: [function(data){}],

自定义的请求头
headers:{'x-Requested-With':'XMLHttpRequest'},

URL查询对象
params:{ id: 12 },

查询对象序列化函数
paramsSerializer: function(params){ }

request body
data: { key: 'aa'},

超时设置s
timeout: 1000,

跨域是否带Token
withCredentials: false,

自定义请求处理
adapter: function(resolve, reject, config){},

身份验证信息
auth: { uname: '', pwd: '12'},

响应的数据格式 json / blob /document /arraybuffer / text / stream
responseType: 'json',

axios的实例

为什么创建axios的实例?

当我们从axios模块中导入对象时, 使用的实例是默认的实例.

当给该实例设置一些默认配置时, 这些配置就被固定下来了.

但是后续开发中, 某些配置可能会不太一样.

比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.

这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

//axios实例
const axiosInstance = axios.create({
    baseURL: 'http://123.123',
    timeout: 5000,
    headers: {}
})
axiosInstance({
    url: '/home/data',
    method: 'get'
}).then(res => {
    console.log(res);
})

axios封装

sec/network/request.js

import axios from 'axios'
export function request(config) {
    //创建axios实例
    const axiosInstance = axios.create({
        baseURL: 'http://123.123',
        timeout: 4000
    })

    return axiosInstance(config)

}

main.js

import { request } from './network/request'
request({
    url: '/home/data',

}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

axios拦截器

axios提供了拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理。

拦截请求

axiosInstance.interceptors.request.use(config => {
        console.log(config);
        //不return得不到数据 因为请求被拦截了
        return config
    }, err => {
        console.log(err);
    })

拦截响应

axiosInstance.interceptors.response.use(response => {
        console.log(response);
        //不return得不到数据 因为响应被拦截了
        return response
    }, err => {
        console.log(err);
    })

    return axiosInstance(config)

请求拦截可以做到的事情：

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

应拦截中完成的事情：
响应的成功拦截中，主要是对数据进行过滤。


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