▼前言:
Params和Data的区别:
GET
请求的参数都是在URL
上的服务器,http body里面的数据并不会被读取,这样我们传递的就是Params里的请求的参数了。
如果想让服务器读取http body里面的数据那就需要用POST
请求了,POST请求的参数就存放在body。
总结使用方法如下:
get方法用params,post方法用data。
Promise
异步请求的两个参数: resolve
成功的回调函数; reject
失败的回调函数
▼分步引用
get 请求
let get = function (url, data) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: data
}).then((res) => {
// 请求成功返回后台数据
resolve(res.data)
}).catch((error) => {
reject(error)
})
})
}
post请求
let post = function (url, data) {
return new Promise((resolve, reject) => {
// qs.stringify()将对象 序列化成URL的形式
axios.post(url, qs.stringify(data)).then((res) => {
// 请求成功返回后台数据
resolve(res.data)
}).catch((error) => {
reject(error)
})
})
}
▼分步引用
post get请求都可以发送的请求
let request = function (url, method = 'GET', data = {
}) {
return new Promise((resolve, reject) => {
axios({
url: url,
method: method,
// post
data: qs.stringify(data),
// get
params: data
}).then((res) => {
// 请求成功返回后台数据
resolve(res.data)
}).catch((error) => {
reject(error)
})
})
}
完成内容封装之后,需要在文件中导出函数:
export {
request,
get,
post
}
调用
在main.js
文件中全局注入:
// 封装axios primary
import axios from 'axios'
import {
api } from './api'
import qs from 'qs'
// 默认的地址
axios.defaults.baseURL = api
到这里我们就可以在vue页面中随意调用上面api中导出的几个网络请求方法了!