码迷,mamicode.com
首页 > 移动开发 > 详细

vue中axios的基本配置

时间:2019-10-23 00:05:06      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:request   形式   好的   自己的   都对   tor   tip   div   表单   

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‘

 

vue中axios的基本配置

标签:request   形式   好的   自己的   都对   tor   tip   div   表单   

原文地址:https://www.cnblogs.com/szxEPoch/p/11723114.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!