vue中axios的使用与封装

更新日期: 2019-03-04阅读: 9.3k标签: 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)
                })
            }
        }
    }

使用方便简洁。  

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

 

链接: https://www.fly63.com/article/detial/2219

axios处理Http请求的基本使用方法总汇

axios的功能特性:在浏览器中发送 XMLHttpRequests 请求,在 node.js 中发送 http请求,支持 Promise API,拦截请求和响应,转换请求和响应数据,自动转换 JSON 数据,客户端支持保护安全免受 XSRF 攻击

axios的特点与使用_解决处理axios兼容性问题

axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用。项目中发现,在安卓4.3及以下的手机不支持axios的使用,主要就是无法使用promise。加上以下polyfill就可以了。

axios常见传参方式_axios中get/post/put/patch请求

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios中get/post/put/patch请求。传参格式为 formData ,传参格式为 query 形式 ,传参格式为 raw等

axios-mock-adapter_一个axios调试好用的工具

axios-mock-adapter可以用来拦截http请求,并模拟响应,使用起来也很简单,比如你想模拟下服务器返回个500错误,什么404找不到、403禁止访问、500服务器错误、503服务不可用、504网关超时等等,你都能模拟出来

vue axios不缓存get请求(防止返回304不更新数据)

最近做项目遇到一款浏览器,由于缓存了get请求,导致不管如何刷新,数据都不更新的问题。以下分享一下解决办法:解决思路就是给每一条get请求增加一个timestamp的参数,value为时间戳

vue中axios请求的封装

发送请求模块目录,@/api/url中存放的是每个模块的URL,使用webpack提供的require.context将src/api/url下后缀为js的所有文件引入,并整理出一个对象。整合common.js & product.js,最终得到的对象如下:

axios基于常见业务场景的二次封装

axios的二次封装,功能实现:1.兼容ie浏览器避免缓存2.减少或更新重复请求3.接口域名使用环境变量4.全局loading状态5.可关闭的全局错误提醒6.可开启携带全局分页参数

Vue+Typescript中在Vue上挂载axios使用时报错

在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下:这样的话,我们在各个组件中进行请求时

vue axios 拦截器

项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断。axios的拦截器分为请求拦截器和响应拦截器两种。我一般把拦截器写在main.js里。

自己动手实现一个axios

作为一名前端er,对于数据请求的第三方工具axios,一定不会陌生,如果还是有没有用过,或者不了解的小伙伴,这里给你们准备了贴心的中文文档 ,聪明的你们一看就会~

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!