axios post json_Vue与axios的完美结合

聊骚

两个多星期没写推文了，估计大家都快把我给忘了。

连续实习了十来天，晚上还得赶项目，只能咕咕咕了~~~

背景

近期团队中后台的小伙伴向我反应，说：“你就不能统一给所有请求跨域携带cookie吗？”

的确，我的请求写的很冗余，出现了很多重复的东西，也因为我熟悉jquery ajax写法的原因，我迟迟没有放弃它。

而只是单纯使用jquery ajax的话，无疑是大材小用。

如今也是时候来一波技术换新，axios真香~

介绍

前一阵子我也使用过axios，当时的想法很简单，axios更专注于数据交互。

放弃的理由也很简单，不熟悉，使用起来不顺手。

但当我再次去关注axios的时候，才发现它真的魅力四射啊！

• 高度可配置

• 高度可重用

• 轻量

• 与Vue等主流前端框架完美结合

使用

axios的用法十分简单，如下：

axios

.get(url)

.then(result => {

console.log(result.data)

})

axios

.post({

url: 'http://xxx.com/sendMsg',

data: {

name: "xuanzai"

}

})

.then(result => {

console.log(result.data)

})

简单的get、post请求。

使用自定义axios实例

由于axios是一个定位为高可配置、高重用的的请求库，它能做的事情不仅如此，比如，我们可以创建一个自定义的axios实例:

// 创建一个新axios的实例

const myAxios = axios.create({

baseURL: "http://myinterface.xuanzai.top/",

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

},

transformRequest: [(data) => {

let str = ""

for(let key in data) {

str += `${key}=${data[key]}&`

}

return str.replace(/&$/, '')

}]

})

myAxios({

url: 'sendMsg',

data: {

name: "旋仔",

age: 20,

favor: "打羽毛球"

}

})

.then(result => {

console.log(result.data)

})

复用属性

复用 axios属性，以便创建自己的实例：

// 给所有axios实例配置请求根路径

axios.prototype.baseURL = 'http://myinterface.xuanzai.top/'

// 给所有axios实例配置跨域携带cookie

axios.defaults.withCredentials = true

// 给所有axios实例配置统一的数据返回格式

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

try {

return JSON.parse(data).data

}catch(e) {

return data

}

}]

融入Vue

axios融入Vue十分简单，先来创建一个http.js文件，写入如下代码:

import axios from 'axios'

// 给所有的实例配置请求根路径

axios.defaults.baseURL = 'http://myinterface.xuanzai.top/'

// 给所有的实例配置跨域携带cookie

axios.defaults.withCredentials = true

// 给所有的实例配置同一的返回数据格式

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

try {

return JSON.parse(data).data

}catch(e) {

return data

}

}]

// 发送数据格式为键值对

const myAxios_1 = axios.create({

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

},

transformRequest: [(data) => {

let str = ""

for(let key in data) {

str += `${key}=${data[key]}&`

}

return str.replace(/&$/, '')

}],

})

// 发送数据格式为JSON格式

const myAxios_2 = axios.create({

headers: {

'Content-Type': 'application/json'

},

transformRequest: [(data) => {

return JSON.stringify(data)

}],

})

// 发送数据格式为文件类型

const myAxios_3 = axios.create({

headers: {

'Content-Type': 'multipart/form-data'

},

transformRequest: [(data) => {

const formData = new FormData()

for(let key in data) {

formData.append(key, data[key])

}

return formData

}],

})

export default {

myAxios_1,

myAxios_2,

myAxios_3

}

在 main.js中引入：

import http from 'http'

Vue.prototype.$req_normal = http.myAxios_1

Vue.prototype.$req_json = http.myAxios_2

Vue.prototype.$req_file = http.myAxios_3

然后就能愉快的与后台进行数据交互啦~

写在最后

多加一些思考，只求让自己的工作变得更加简单~