js中axios

一、axios请求总结

axios是vue作者推荐在vue中使用的网络请求库
1.get请求
axios.get(url).then(res => 处理程序)

axiox.get('https:xxxxxxxxx').then(res => 处理程序)

2.post请求
axios.post(url,请求体,{options}).then(res => 处理程序)

axios.post('https:xxxxxxxxx','key1=value1&key2=value2').then(res => 处理程序)

3.配置式的常规写法
axios({
url,
method,
headers,
params, // get方式传参
data, // post 方式参数
…
}).then()

二、全局默认配置

对axios对象进行一次全局配置，返回instance对象，instance对象可以作为axios对象使用；使用全局配置，就不用每次请求再重复配置了，比如baseURL、headers等，每次请求就不用再重新配置了

const instance = axios.create({
     baseURL: url,
     timeout: 1000,
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
 });

三、拦截器

拦截器就是在请求或者响应之前，做一次统一的逻辑操作

// 设置请求拦截器
instance.interceptors.request.use(function (config) {
    // Do something before request is sent
    // 请求
    config.headers.token = 123
    console.log('请求拦截', config)
    return config;
}, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

// 设置响应拦截器
instance.interceptors.response.use(function (response) {
    // Do something with response data
    console.log('响应拦截', response)
    alert('请求成功')
    return response;
}, function (error) {
    // Do something with response error
    return Promise.reject(error);
});