详解vue中axios的使用与封装

分享下我自己的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})
};
//修改账号信息restful
const 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)
        })
      }
    }
  }

使用方便简洁。

以上所述是小编给大家介绍的vue中axios的使用与封装详解整合，希望对大家有所帮助