vue中安装axios来处理ajax

1.安装

cnpm install axios --save

2.main.js中全局引入

import axios from 'axios'
Vue.prototype.$ajax = axios

3.调用

this.$ajax.get(URL)
.then((response)=>{
  console.log(response);
})
.catch((error)=>{
  console.log(error);
});

局部引入
1.安装以后
2.组件中直接引入

import axios from 'axios'

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

4.其他问题
get正常post方式时候后端无法读到值，此时需要引入qs
因为jQuery与axios在post请求中，数据的处理方式并不相同。jQuery默认数据是Form格式，axios则是前后端同构的payload形式，这个区别造成了后台在获取post请求的数据时获取方式不同

import axios from 'axios'
import qs from 'qs'
export function ajaxPost (url, data, callback) {
  axios.post(url, qs.stringify(data))
    .then((res) => {
      if (res.data.retCode === 0) {
        callback(res)
      } else {
        showModalMsg(res.data.retMsg, 'error')
      }
    })
    .catch(function (error) {
      showModalMsg(error, 'error')
    })
}

页面中调用

import { ajaxPost } from '@/utils/api.js'
ajaxPost('/auth/sms-code', {}, function () {
  alert('666')
})

request payload和formData区别
FormData和Payload是浏览器传输给接口的两种格式，这两种方式浏览器是通过Content-Type来进行区分的，如果是 application/x-www-form-urlencoded的话，则为formdata方式，如果是application/json或multipart/form-data的话，则为 request payload

jquery中的ajax contentType默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。

参数序列化为什么要用QS而不是直接使用JSON.stringify
通过get方式传递参数每个参数之间用&分割

form: {
  firstName: '',
  lastName: '',
  test:[1,2,3]
},

此时test中的值在url中的表示正确的表示方式是test[0]=1&test[1]=1&test[2]=1，而默认情况下axios并不能正确处理
经过一番验证，在普通对象传参时候JSON.stringify没有问题，一旦遇到包含嵌套的对象使用JSON.stringify处理后结构错误，此时就无法正确解析，此时就需要用到Qs.stringify来序列化
参考链接：https://segmentfault.com/q/1010000010909311/a-1020000010910204

铁血汉子 2017年12月25日

0 2118