vue axios配置及axios封装,http封装。

1,705 阅读2分钟

前言

改变从行动开始。在vue项目开发中,通常我们会对我们的请求有一些个性的需求,所以会对axios进行针对性的配置,以及封装。

1.安装axios与引入

安装
npm install axios
引入
第一种,全局引入 在 main.js 中写入 import axios from 'axios' 
第二种,在封装api文件中引入即可(常用)
views文件夹内创建api文件夹,里面创建index.js文件

2.axios配置

index.js中写入

import axios from 'axios'
import { Qs } from 'qs'//vue自带方法 如果未用到 无视即可
//axios配置
const http = axios.create({
  method: 'post',
  baseURL: process.env.VUE_APP_BASE_API,//请求的url前缀
  withCredentials: true,//开启withCredentials后,服务器才能拿到你的cookie,当然后端服务器也要设置允许你获取你开启了才有用
  timeout: 5000,//请求超时
  headers: {//headers设置 如缓存等 没需求的话都可以不需要
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  }
});

// axios 请求拦截:
http.interceptors.request.use(config => {
  //通常处理token相关逻辑 
  // 判断localStorage 或者 SessionStorage 内有无token 进行相应处理 此处简单的做了个赋值token操作
  // let token = localStorage.getItem('mytoken');
  // config.headers['Authorization'] = token;
  return config;
}, err => { return Promise.reject(err); });

// axios 响应拦截;
http.interceptors.response.use(res => {

  return res;
}, err => {
  return Promise.reject(err.data);
});

export default http;

// 封装
/**
 * get方法,对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    http.get(url, { params: params }).then(res => {
      res.data ? resolve(res.data) : resolve(res);
    })
  });
}

/**
 * post方法,对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    http.post(url, params).then(res => {
      res.data ? resolve(res.data) : resolve(res);
    })

  });
}

3.http使用

上面封装好了就要正式使用了,首先我有一个homePage.vue页面,所以我在views文件夹api文件夹,里面创建homePage.js文件,用来管理此页面的请求。

import http from './index'
import { get, post } from './index';
import { stringify } from 'qs'

const api = {
  home_api: (params) => http.post("/V2/wmsbase/carrier/list", stringify(params)),//不使用get post封装 stringify看需求使用
  home2_api: params => get('/V2/wmsbase/carrier/list', params),//使用get post封装
}


export default api;

homePage.vue中使用
vue项目中http请求的使用通常就两种。如下,看个人喜好使用即可。

import http from 'api/homePage'//这里注意文件位置,我是vue.config.js配置文件配过路径映射使用所有的引入都可以api/xxxx

methods: {
	//第一种 async await 同步方式处理异步逻辑
    async requestApi() {
      let res = await http.home_api();
      if (res.code == 200) {
        //逻辑
      }
    },
    //第二种 .then中处理逻辑
    requestApi2() {
      home2_api().then(res => {
        if (res.code == 200) {
          //逻辑
        }
      })
    }
  },

结束语

改变从行动开始。axios配置和封装以及使用大体就是如此了,下期给大家带来vue项目配置及打包设置,请求代理,路径映射等在vue.config.js中如何配置。具体可以参考我的开源项目链接。项目上面axios封装,http封装以及vue.config.js配置都已经配置好。希望能给大家带来一点帮助。