本篇共 2146 字

axios的全局配置

作者:admin   分类:前端   发布:6 月前   阅读量:1   浏览量:1

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

标签: vue axios
本篇共 0 条评论

留言内容:

还没有任何评论!

还没有登陆,请登录后发表评论!