vue案例之——axios网络层封装

我们平常在开发项目中，会经常用到axios发送请求，axios基于 promise对原生的ajax进行了一定封装 直接使用当然很方便。但是我们在写一个真实的上线项目时，直接用axios就会使项目变得不易维护。下面就用我自己的方式来对axios进行一个简单的封装。

axios我已经安装 （npm install axios -S）

首先在项目中创建一个文件夹 （这里叫network）：

1. 第一步 创建 service.js文件，里面主要是配置的axios 拦截器 最后导出一个对象。（我做的是移动端项目 所用的是vantUI,也可以用别的组件库）

import { Toast } from 'vant'

const tip = msg => {
  Toast.loading({
    message: msg,
    duration: 1000,
    forbidClick: true
  });
}

const { baseURL } = require('../config/env.' + process.env.NODE_ENV + ".js")


const instance = axios.create({
	//基本url配置
  baseURL: "",
  //超时时间 超出该时间 就会拦截请求
  timeout: 10000
});

instance.interceptors.request.use(function (config) {

  if (!config.hideloading) {

    tip("加载中..")

  }
//这里是判断用户是否登陆 是根据store中是否有token，如果有就把它加到请求头中
  if (store.state.token) {
    config.headers.token = store.state.token
  }
  return config;

}, function (error) {

  console.log("========>", error);
  return Promise.reject(error);
});

我这里的token是请求服务器，服务端同意连接给我返回的token，我将它存到了vuex中

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  Toast.clear()
  const res = response.data
  if (res.status && res.status !== 200) {
    // 登录超时,重新登录
    if (res.status === 401) {
      store.dispatch('FedLogOut').then(() => {
        location.reload()
      })
    }
    return Promise.reject(res || 'error')
  } else {
    return Promise.resolve(res)
  }

}, function (error) {

  Toast.clear()
  console.log('err' + error) // for debug


  return Promise.reject(error);
});

export default instance

这就是network中的核心配置 axios拦截。

2.然后就是我们项目要发送请求的核心方法 :

request.js 代码如下：

post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为 application/x-www-form-urlencoded;charset=UTF-8

// 设置post请求头

service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

import request from './service'
import {login, register, verifyPhone, phonecode, username, } from "./http";

export function Login(data) {
  return request({
    url: login,
    method: 'post',
    data,
    hideloading: true
  })

}
export function Register(data) {
  return request({
    url: register,
    method: 'post',
    data,
    hideloading: true
  })
}
export function VerifyPhone(params) {

  return request({
    url: verifyPhone,
    method: "get",
    params,
    hideloading: true
  })

}

// 手机验证吗
export function Phonecode(params) {

  return request({
    url: phonecode,
    method: "get",
    params,
    hideloading: true
  })

}
export function Checkusername(params) {

  return request({
    url: username,
    method: "get",
    params,
    hideloading: true
  })

}

注意若是post请求，按照规范参数体应该为data形式

以下是项目的所用到的接口：

3. http.js 配置如下：

const api= {

  login: "/LoginPage/Login",
  
  register: '/LoginPage/AddLogin',

  verifyPhone: "/Verify/GetPhone",
 
  phonecode: '/SMSCode/GetCode',
 
  username: '/Verify/LoginName',


}

module.exports = api

具体用法：

<script>

import { login } from "../network/request";

created(){
		Login().then((res) => {
  			console.log(res);
        }).catch((err) => {
			console.log(error)
		});
}
 
</script>

axios的基本配置到这里已经差不多了，我们只需要在组件中按需引入就好了，还需要注意的是，如果有多个环境变量，还要配置一下环境（开发、测试、生产）

eg：
创建config目录。
目录下创建 env.development.js+env.production.js+env.test.js

env.development.js 内容如下：

module.exports={
    baseUrl:' http://www.devele.com:4456' //开发环境用到的baseurl
}

// 环境的切换
const {baseUrl}=require('../config/env.'+process.env.NODE_ENV);

//同时 package.json的scripts需指定测试环境的模式  --mode test
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  }

const service = axios.create({
  baseURL: baseUrl, // url = base api url + request url
  withCredentials: false, // send cookies when cross-domain requests
  timeout: 1000*12 // 请求超时
})