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'