前言:在vue项目中我们经常会使用axios去请求后台数据做交互,今天整理了一下怎么使用promise去封装axios,方便我们管理。
在根目录下创建utils文件夹
在utils里创建两个js文件
文件1: index.js
import Axios from "axios";
class Http {
//request 方法
request(params) {
return new Promise((resolve, reject) => {
Axios({
method: params.type || "get",
url: params.url,
data: params.data,
headers: params.headers
})
.then(res => {
if (res.data.code === 0) {
resolve(res);
} else {
console.log(res.data.msg);
}
})
.catch(err => {
reject(err.statusText); //失败
console.log('网络异常');
});
});
}
}
export default Http;
文件2:axios.js
import Http from './index.js'
const http = new Http();
export default class beg {
//shopList 为自定义方法名
//不传值渲染
shopList() {
return http.request({
url: `https://api.it120.cc/small4/banner/list`,
type:'get'
})
}
//传值获取 例:
shopId(id) {
return http.request({
url: `https://api.it120.cc/small4/shop/goods/detail/?id=${id}`,
type:'post'
})
}
}
具体某个vue模块使用
import axios from '../utils/axios.js';
let Axios = new ajax();
mounted(){
Axios.shopList().then(res => {
console.log(res.data);
});
}
附:axios安装
cnpm i axios
main.js引入
import axios from 'axios'
Vue.prototype.$axios = axios
直接粘贴复制即可,通用的,哪里不懂得、有错误的留言讨论纠正~~~
end