vue中axios的使用与封装

分享下我自己的axios封装
axios是个很好用的插件，都是一些params对象，所以很方便做一些统一处理

当然首先是npm安装axios 很简单$ npm install axios --save
在src下新建文件夹 service / index.js
接着上代码

 1 import axios from 'axios';
 2 import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示
 3 import router from '../router'
 4 
 5 // 默认超时设置
 6 axios.defaults.timeout = 50000;
 7 
 8 // 相对路径设置
 9 axios.defaults.baseURL ='';
10 
11 //http request 拦截器
12 axios.interceptors.request.use(
13   config => {
14     // 获取token
15     const token = localStorage.getItem('cc_token');
16     // 设置参数格式
17     if(!config.headers['Content-Type']){
18       config.headers = {
19         'Content-Type':'application/json',
20       };
21     }
22     // 添加token到headers
23     if(token){
24       config.headers.token = token
25     }
26     // 鉴权参数设置
27     if(config.method === 'get'){
28        //get请求下 参数在params中，其他请求在data中
29       config.params = config.params || {};
30       let json = JSON.parse(JSON.stringify(config.params));
31       //一些参数处理
32     }else{
33       config.data = config.data || {};
34       //一些参数处理
35     }
36     return config;
37   },
38   err => {
39     return Promise.reject(err);
40   }
41 );

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

//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)
                })
            }
        }
    }

使用方便简洁。

over

版权声明：本文来源博客园，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.cnblogs.com/wangwBlogs/p/10471826.html
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2019-11-17 14:09:53
阅读 ( 1228 )
分类：前端

vue中axios的使用与封装

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看