axios的全局配置

在实际开发中我们请求接口的域名是固定,只是单纯的路径发生变化,也有可能很多参数都是固定的,那么我们就可以把这些固定的参数提取封装到一个文件,或者利用axios的全局配置!

// baseurl
axios.defaults.baseurl = 'https://store.crmeb.net/api/pc'

// headers
axios.defaults.headers.post['content-type'] = 'application/x-www-form-urlencoded';

案例,并发请求:

如下例所示我们的baseurl地址都是固定的,超时时间也是固定的,那么整个项目如果都是这样的配置,每个地方都去做这样的配置就显得代码非常的冗余,这就是使用全局配置的意义!

axios.all([
    axios({
        baseurl: 'https://store.crmeb.net/api/pc',
        timeout: 5000,  // 毫秒
        url: '/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceorder: '', 
            news: 0,
        }
    }),
    axios({
        baseurl: 'https://store.crmeb.net/api/pc',
        timeout: 5000,
        url: '/get_company_info',
    })
    // 箭头函数一个参数可以省略小括号(),多个参数则不能省略
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))

改造抽取如下:

axios.defaults.baseurl = 'https://store.crmeb.net/api/pc'
axios.defaults.timeout = 3600

axios.all([
    axios({
        url: '/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceorder: '', 
            news: 0,
        }
    }),
    axios({
        url: '/get_company_info',
    })
    // 箭头函数一个参数可以省略小括号(),多个参数则不能省略
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))

axios的请求配置选项有很多,具体大家可以参考官网!

中文站:http://www.axios-js.com/zh-cn/docs/index.html