vue使用promise封装axios

前言：在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

本文地址：https://blog.csdn.net/LingHuzh/article/details/107858904