网络模块封装axios

axios框架

最基本的axios使用，
axios({
url:’…’
}).then().catch()
axios返回的是一个promise对象，故在axios后面可调用.then接收请求回来的数据。
第二种则是
axios({
url:’’,
params:{
type:‘pop’,
page:1
}
}).then()
相当于在请求地址后面直接拼接www.xxx?tyep=pop&page=1
第三种则是
axios.all([
axios(),
axios()

]).then(s=>console.log(s[0],s[1]))
一次性请求多个，将返回的数据放到一个数组里面，数组【0】就是对应第一个axios请求

可以用axios.defaults.baseURL=’'输入相同的网址，这样就不会每次调用时输入一大串网址，
axios.defaults.tiemout=2000,则是规定请求的时间不超过2秒

创建axios实例，

第一步

const A=axios.create({
baseURL:’’,
timeour:2000
})

第二部拦截请求

请求拦截

A.interceptors.request.use(
config=>{return config}
err=>console.log(err)
)
请求拦截中，Config为请求成功的拦截，但需要返回去。否则不进行下一步

响应拦截

A.interceptors.response.use(
res=>{return res}
err=>log(err)
)
响应拦截跟请求拦截一样

第三步 发送真正的网络请求

A({
url:’/’
}).then()
发送后返回的也是一个promise对象，故可以用then来接收数据

封装axios

如果我们在很多个文件直接调用axios，然后直接请求，如果日后axios不更新了，你得换一个框架时，就会非常麻烦。倘若我们把他封装成一个自己的js文件，再用很多个文件去调用这个js文件，日后换框架，只需修改自己的js文件，因为其他文件在调用时只要直接输入url，就可以调用.then()接收，而不用在意怎么完成的，故我们应该学会封装axios
在request.js文件中
import axios from ‘axios’
export function request(config) {
1//创建实例对象

const axiosA = axios.create({
    baseURL: '',
    timeout: 5000
})

//2拦截请求

axiosA.interceptors.request.use(
        config => { console.log(config); return config },
        err => console.log(err)
    )
    //相应拦截
axiosA.interceptors.response.use(
    res => {
        console.log(res);
        return res
    },
    err => console.log(err)
)

//3发送真正的网络请求
return axiosA(config)

}

因为axioA(config)返回的就是一个promise对象，故返回axiosA(),就是将这个对象返回给调用request函数的人，在别的文件中只需
import request from ‘request.js’
request({url:’’}).then(res=>{})
就可以进行网络请求了