这一章节中 我们使用vue-cli3 来创建项目 官网文档(cli.vuejs.org/zh/)
创建好项目后先安装axios（这一次我们使用axios配合讲解这一章节）
-
"devDependencies": {
-
"@vue/cli-plugin-babel":
"^3.0.0-rc.12",
-
"@vue/cli-plugin-eslint":
"^3.0.0-rc.12",
-
"@vue/cli-service":
"^3.0.0-rc.12",
-
"axios":
"^0.18.0",
-
"babel-eslint":
"^10.0.1",
-
"eslint":
"^5.8.0",
-
"eslint-plugin-vue":
"^5.0.0",
-
"vue-template-compiler":
"^2.5.21"
-
},
-
复制代码
关于package.json 具体讲解 详情请见楼主具体章节
首先我们在src目录下建立api 文件夹
-
src
-
——api
-
——index.js
export 导出 api各种文件（注：
export和
export default 有区别 详情请看楼主具体章节）
-
——http.js 这个js文件再一次的封装了axios，更方便的为整个项目服务（Axios 是一个基于 promise 的 HTTP 库）
-
——api.js 配置了与后台交互时候需要携带的静态属性如版本 version：v1 以及公用的路径basePath 等等
-
——main.js
-
复制代码
-
import axios from
'axios'
-
import qs from
'qs'
-
我们需要定义前后端交互常见的几种方法
-
export const methods = {
-
put:
'put',
-
get:
'get',
-
post:
'post',
-
delete:
'delete'
-
}
-
const formData = data => {
-
return qs.stringify(data, { indices:
false })
-
}
-
自定义axios配置 具体参数可以参考网上中文文档
-
const instance = axios.create({
-
timeout: process.env.NODE_ENV ===
'production' ? 15000 : 600000
-
})
-
export const request = ({ method = methods.get, url, data, headers, token =
true }) => {
-
/**
-
* 封装axios请求方法
-
* @param url 请求地址 必传
-
* @param method 请求方法 默认get请求
-
* @param data 请求数据
-
* @param headers 请求头
-
* @param token 是否需要携带token
-
*/
-
if (!url) {
-
console.error(url,
'API function call requires uri argument')
-
return
-
}
-
楼主项目使用
localStorage作为前端缓存token方式
-
let tokenInfo = JSON.parse(window.localStorage.getItem(
'token')) || {}
-
if (token && tokenInfo && tokenInfo.token) {
-
window.location.href =
'/login'
-
return
-
}
-
headers = {
-
...headers,
-
'accessToken': tokenInfo.token
-
}
-
// 默认是form表单传递数据 默认
-
if (!headers[
'Content-Type']) {
-
headers[
'Content-Type'] =
'application/x-www-form-urlencoded'
-
}
-
// 根据Content-Type 来决定 data 是否需要格式话
-
if (headers[
'Content-Type'] ===
'application/x-www-form-urlencoded' && (typeof data) !==
'string') {
-
data = formData(data)
-
}
-
// 这里要注意吧indices 设置为
false 因为前端在传form表单的数据的时候 如果数据里面有数组类型 qs库会吧数组索引转换成object 来发送给后端 这样后端是识别不了的
-
if (method ===
'get' || method ===
'GET') {
-
if (data) {
-
if ((typeof data) !==
'string') {
-
data = formData(data)
-
}
-
// 拼装get请求方法 判断请求参数是否存在
-
url = url +
'?' + data
-
}
-
}
-
-
let req = instance({ method, url, data, headers })
-
req.catch(error => {
-
console.warn(
'[axios request]', error)
-
window._vue.
$Message.error(
'网络错误，请重试')
-
})
-
return req
-
}
-
function resetToken (config) {
-
/**
-
* 处理token
-
* 如 登陆时 服务端会返回一个过期时间 在每次发送请求的时候 验证本地token是否过期了 如果是已经过期了 那么直接吧config中携带的token 替换掉
-
* 如 即将过期 吧缓存中的token重新置换 以待下一次请求
-
*/
-
return config
-
}
-
// axios 拦截器
-
instance.interceptors.request.use(
function (config) {
-
/**
-
* 发送之前要做什么
-
* 例如 token 是有时效的 在token过期之前需要重新请求服务端来兑换新的token
-
*/
-
return resetToken(config)
-
//
return config
-
},
function (error) {
-
/**
-
* 请求错误 比如说网络失败啊 什么的
-
*/
-
return Promise.reject(error)
-
})
-
// 响应错误
-
instance.interceptors.response.use(
function (response) {
-
/**
-
* 对响应的数据处理 比如说 前后端中间层 当后端的给的数据 不能完全适配前端的时候 可以在这里加个中间层 在中间层 来处理数据 并且返回给前端
-
*/
-
return response
-
},
function (error) {
-
/**
-
* 服务读响应错误
-
* 可以写一些常用的处理逻辑 比如说 页面404啊 服务端500 服务器发布啊等常见的错误。(日后可以在这块来收集日志)
-
* 以及一些loading处理
-
*/
-
return Promise.reject(error)
-
})
-
-
复制代码
写的不好 多谅解！！！
1076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
