vue中axios的使用与封装

前端  /  管理员 发布于 6年前   309

分享下我自己的axios封装，axios是个很好用的插件，都是一些params对象，所以很方便做一些统一处理。当然首先是npm安装axios 很简单

npm install axios --save

在src下新建文件夹 service / index.js
接着上代码

import axios from 'axios';import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示import router from '../router'// 默认超时设置axios.defaults.timeout = 50000;// 相对路径设置axios.defaults.baseURL ='';//http request 拦截器axios.interceptors.request.use(  config => {    // 获取token    const token = localStorage.getItem('cc_token');    // 设置参数格式    if(!config.headers['Content-Type']){      config.headers = {        'Content-Type':'application/json',      };    }    // 添加token到headers    if(token){      config.headers.token = token    }    // 鉴权参数设置    if(config.method === 'get'){       //get请求下 参数在params中，其他请求在data中      config.params = config.params || {};      let json = JSON.parse(JSON.stringify(config.params));      //一些参数处理    }else{      config.data = config.data || {};      //一些参数处理    }    return config;  },  err => {    return Promise.reject(err);  });

以上请求之前的一些处理就完成了，下面是获得返回的一些处理

//http response 拦截器axios.interceptors.response.use(  response => {    //一些统一code的返回处理    if(response.data.code === 501){      // 登录验证      //做了个示例跳转项目中登录，并记录下相对路径      router.push({        name:'login',//从哪个页面跳转        query:{          retUrl:window.location.href.split('#')[1] || '',          is_new_user_url:1        }      })    }    return response;  },  error => {    return Promise.reject(error)  });

接着把所有请求类型都做下简单封装 

/** * 封装get方法 * @param url * @param params * @returns {Promise} */export function fetch(url,params={}){  return new Promise((resolve,reject) => {    axios.get(url,{      params:params    })      .then(response => {        if(response.data.code === 200){        //返回成功处理  这里传的啥 后续调用的时候 res就是啥          resolve(response.data.data);//我们后台所有数据都是放在返回的data里所以这里统一处理了        }else{        //错误处理          Toast(response.data.msg)        }      })      .catch(err => {        reject(err);        let message = '请求失败！请检查网络';        //错误返回        if(err.response)message=err.response.data.message;        Toast(message)      })  })}/** * 封装post请求 * @param url * @param data * @returns {Promise} */export function post(url,data = {}){  return new Promise((resolve,reject) => {    axios.post(url,data)      .then(response => {        if(response.data.code === 200){          resolve(response.data.data);        }else{          Toast(response.data.msg)        }      },err => {        reject(err);        let message = '请求失败！请检查网络';        if(err.response)message=err.response.data.message;        Toast(message)      })  })}/** * 封装patch请求 * @param url * @param data * @returns {Promise} */export function patch(url,data = {}){  return new Promise((resolve,reject) => {    axios.patch(url,data)      .then(response => {        if(response.data.code === 200){          resolve(response.data.data);        }else{          Toast(response.data.msg)        }      },err => {        reject(err);        let message = '请求失败！请检查网络';        if(err.response)message=err.response.data.message;        Toast(message)      })  })}/** * 封装put请求 * @param url * @param data * @returns {Promise} */export function put(url,data = {}){  return new Promise((resolve,reject) => {    axios.put(url,data)      .then(response => {        if(response.data.code === 200){          resolve(response.data.data);        }else{          Toast(response.data.msg)        }      },err => {        reject(err);        let message = '请求失败！请检查网络';        if(err.response)message=err.response.data.message;        Toast(message)      })  })}export function del(url,data = {}){  return new Promise((resolve,reject) => {    axios.delete(url,data)      .then(response => {        if(response.data.code === 200){          resolve(response.data.data);        }else{          Toast(response.data.msg)        }      },err => {        reject(err);        let message = '请求失败！请检查网络';        if(err.response)message=err.response.data.message;        Toast(message)      })  })}

好了 主要的文件编辑好 然后在service中新建api.js文件并引入对应组件方法  

import vue from 'vue';import {post,fetch,patch,put,del,upload,ret2} from './index'Vue.prototype.$post=post;Vue.prototype.$fetch=fetch;Vue.prototype.$patch=patch;Vue.prototype.$put=put;Vue.prototype.$del=del;

接着就可以开始写各个API方法了 

//也可以不需要const _baseUrl=process.env.API_URL;//这里我在项目配置文件里面设置了相对路径//登录方法const loginURL = `${_baseUrl}api/admin/login`;export const loginApi = function(json) {  return Vue.prototype.$post(loginURL,{"username":json.username,"passwd":json.password})};//修改账号信息RESTfulconst editAdminUrl = `${_baseUrl}api/admin/user/info`;export const editAdminListApi = function (id,json) {  return Vue.prototype.$put(`${editAdminUrl}/${id}`,json)};//等等...

最后是使用，非常简单方便，在vue文件中引入并使用 

import { loginApi ,editAdminListApi } from "../../service/api";    export default {        methods：{            //登录            login(){                let json = {                    userName:'xx',                    password:'xx'                }                loginApi().then(res=>{                    console.log(res)                })            },            // RESTful 修改信息            editAdminList(){                let id = 1;                let json = {name:11};                editAdminListApi(id,json).then(res=>{                    console.log(res)                })            }        }    }

使用方便简洁。  

来自：https://www.cnblogs.com/wangwBlogs/archive/2019/03/04/10471826.html