vue中axios的基本配置

Posted 2021-03-25 纪元丶

vue中axios的基本配置

 

 

1.配置默认地址   

　　axios.defaults.baseURL = "";

2.发送数据详解

　　axios 使用 post 发送数据时，默认是直接把 json 放到请求体中提交到后端的。也就是说，我们的 Content-Type 变成了 application/json;charset=utf-8 ,这是axios默认的请求头content-type类型。但是实际我们后端要求的 ‘Content-Type‘: ‘application/x-www-form-urlencoded‘ 为多见，这就与我们不符合。所以很多同学会在这里犯错误，导致请求数据获取不到。明明自己的请求地址和参数都对了却得不到数据。　

　　post请求常见的数据格式（content-type）

　　1.Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端

　　2.Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端

　　3.Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

Content-Type: application/x-www-form-urlencoded配置详解：

　　//请求头

　　axios.defaults.headers.post["Content-Type"]="application/x-www-form/urlencoded"

 　　//请求体-查询字符串

axios.defaults.transformRequest = [(data)=>{

            return qs.stringify(data,{arrayFormat:‘repeat‘});

}]

Content-Type: application/json：

这种是axios默认的请求数据类型，我们只需将参数序列化json字符串进行传递即可，所以可以无需配置。

下面给出一个配置好的例子：

/**
    axios的配置文件
    1、设置post数据格式为表单格式
    2、设置基路径
    3、序列化字符串
*/
import axios from ‘axios‘;
import qs from ‘qs‘;
//配置
//配置前后端数据交互的请求头：
axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded;charset=UTF-8‘;
// 设置后台的访问地址
axios.defaults.baseURL = ‘地址‘;
// 拦截
axios.interceptors.request.use((config) => {
    if (config.method === ‘post‘) {
        config.data = qs.stringify(config.data,{arrayFormat: ‘repeat‘ });
    }
    return config;
}, (error) => {
    return Promise.reject(error);
});

export default axios;


//在vue主组件中引入即可
// import axios from ‘@/http/axios‘