vue中axios的基本配置

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‘

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

时间: 2024-11-02 21:36:17

vue中axios的基本配置的相关文章

vue 中axios 的基本配置和基本概念

ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 axios的安装: cmd命令行进入到vue项目下,执行npm install axios 然后执行提示npm install --save axios vue-axios 配置方法: 打开vue的编辑器,找到当前项目的main.js文件,输入: import axios from 'axios' Vue.prototype.axios =

聊聊 Vue 中 axios 的封装

聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一个优秀的 HTTP 库,axios 打败了曾经由 Vue 官方团队维护的 vue-resource,获得了 Vue 作者尤小右的大力推荐,成为了 Vue 项目中 HTTP 库的最佳选择. 虽然,axios 是个优秀的 HTTP 库,但是,直接在项目中使用并不是那

vue中axios 配置请求拦截功能 及请求方式如何封装

main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' import axios from 'axios' Vue.prototype.$http = axios //http request 封装请求头拦截器 axios.interceptors.request.use(config => { // console.log("request&quo

在vue中使用sass的配置的方法

1.创建一个基于 webpack 模板的新项目 vue init webpack myvue 2.在当前目录下,安装依赖 cd myvue npm install 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 4.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.sass

vue中axios的封装

第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 拦截器 axios.interceptors.request.use( config => { // const to

Vue中axios的使用技巧配置项详解

使用axios首先要下载axios模块包 npm install axios --save 其次需要在使用的文件中引入 import axios from 'axios' 一.调用axios常见两种方法(此处使用easy-mock模拟数据接口): //方法1 axios({ method: 'post', url:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios' }) .then((respons

Vue中使用vux的配置

1.进入项目 2.安装使用 npm install vux --save 3.vux2必须配合vux-loader使用,安装vux-loader npm install vux-loader --save-dev 4.安装less-loader  (这个是用以正确编译less源码,否则会出现 ' Cannot GET / ') npm install less less-loader --save-dev 5.在build/webpack.base.conf.js 文件进行配置 const vu

vue中axios设置

//设置默认全局baseURL axios.defaults.baseURL=process.env.BASE_API; //设置默认全局携带浏览器cookie axios.defaults.withCredentials=true; Vue.prototype.$http = axios; 原文地址:https://www.cnblogs.com/randomlee/p/10167306.html

vue中axios发送post请求,后端(@RequestParam)接不到参数

遇到的问题描述 :axios post 请求,后端接收不到参数. 我们的接口是java,用@RequestParam来接收前端的参数 解决方案:使用qs:axios中已经包含有qs,所以无需重新安装,直接引入就好 import Qs from 'qs'//引入qs let chedata = { data: encStr, sign: md5.hexMD5(che), timestamp: timestamp, } //chedata是我需要传递给后端的参数 console.log(Qs.str