vue项目async/await封装axios请求
安装axios
npm install axios --save
创建http.js文件
import axios from "axios"
/* 请求拦截器 */
axios.interceptors.request.use(
config => {
/* 添加token */
let token = localstorage.getItem("token") || "";
if(token){
config.headers["token"] = token
}
return config;
},
error => {
return Promise.reject(error)
}
)
export const http = (url,params,method='GET',type='json') =>{
/* 设置时间随机数,解决请求缓存问题 */
let _t = new Date().getTime();
if(method == 'GET' || method == 'get'){
if(params){
params._t = _t
}else{
params={ _t }
}
}
/* 设置请求头 */
if (method === "POST") {
if (type == "json") {
//参数是json类型
axios.defaults.headers.post["Content-Type"] =
"application/json;charset=UTF-8";
} else {
//参数是字符串类型
axios.defaults.headers.post["Content-Type"] =
"application/x-www-form-urlencoded";
// params = Qs.stringify(params);
}
}
/* 发送请求 */
return new Promise((resolve,reject) => {
axios({
url,
method,
type,
data:method != "GET" ? params : null,
params:method == "GET" ? params : null
})
.then(result => {
/* 此处可以全局处理接口特殊状态码,比如token失效等 */
resolve(result.data)
})
.catch(error => {
reject(error)
})
})
}
/* await to js */
export const to = promise => {
return promise.then(res => [null,res]).catch(error => [error])
}
创建api.js文件,设置接口请求处理
import { http, to } from "./http";
// ---- 全局接口 -----
export const ceshiList = params => {
return to(http("json/ceshi.json", params, "GET"));
};
api使用
import { ceshiList } from "@/http/api.js";
methods:{
async getList(){
let [err, res] = await ceshiList();
if (!err) {
if (res.result.code == 200) {
/* 接口请求正确处理 */
console.log(res);
}
}
}
}
转化blob返回的数据
const render = new FileReader();
render.onload = function(){
let jsonData = JSON.parse(render.result)
}
render.readAsText(data)
40 声望
6 粉丝
推荐阅读
vue+x6 ER 图对象模型
功能描述 x61、对象模型新增、编辑、删除2、模型字段新增、编辑、删除3、模型关系新增、编辑、删除4、点击事件添加工具及选中样式5、拖拽移动6、属性的展示与隐藏7、模型复制
忘れられたくない阅读 183
Promise: 异步编程的理解和使用
JavaScript 中,Promise 的流行是得益于 jQuery 的方法 jQuery.Deferred(),其他也有一些更精简独立的 Promise 库,例如:Q、When、Bluebird。
后除赞 2阅读 770
vue页面消毁时,取消axios当面所有请求
取消axios请求,需要了解axios里的 cancelToken 属性 {代码...} 首页定义一个数组进行储存每个请求的cancelToken, 可以储存到Vue对象、vuex、window等,在跳转路由时取消请求即可;路由处理
Max迪丶先生赞 1阅读 3.4k
axios 请求参数去空
{代码...}
深邃烟海阅读 694
前端axios调接口实现下载文件的解决方案
有任何问题都可以留言咨询。背景项目中有个下载接口,下载的是zip压缩包文件。但后端返回的是二进制流数据,而不是直接下载一个zip文件。前端用的是axios来发请求。解决方案其实这个二进制流数据格式是比较常见的...
simonbaker阅读 388
axios下载文件
{代码...}
linyelai阅读 233
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。