手把手教你在vue中实现一个简单的Axios封装

在新起一个vue工程的时候每次都要去网上搜一下如何封装axios...

有一点心累，打算自己写一个属于自己的模版。也是方便以后的使用。废话不多说开始吧！

首先npm install axios进行安装

在安装之后可以在**src下面见一个utils文件夹，在**utils**下面新建一个request.js**文件

例如这样：

在**request.js中引入axios**并具体实现封装：

import axios from 'axios';
//创建一个axios实例
const service = axios.create({
  // baseURL,  //可以是你要调用的基础url
  timeout: 5000 // 超时时间设置为5秒
})
// 这里是一个请求拦截器
service.interceptors.request.use(
    config => {
        //在请求之前需要做的操作我们可以放到这里
        //需要登陆权限我们可以在这把请求时需要的token加上！
       //if (需要权限) {
         //一般token都是在登陆之后保存在vuex中
         //config.headers['X-Token'] = ‘具体的token’
        //}
        console.log('请求！');
        return config;
    },
    error => {
        // 在请求失败时做的一些操作我们可以放到这里
        console.log('请求错误！');
        console.log(JSON.stringify(error));
        return Promise.reject(error);
    });
//这里是一个响应拦截器
service.interceptors.response.use(
  response => {
    //任何在2xx范围内的状态代码都会触发此功能
    //我们可以在这里处理响应的数据
    console.log('收到!');
    return response;
  },
  error => {
    //任何超出2xx范围的状态代码都会触发此功能
    //我们可以在这里处理响应错误
    console.log('收到错误!');
    console.log(JSON.stringify(error));
    return Promise.reject(error);
  });

export default service;

 到这里一个简单的封装axios就完成了，接下来我们可以对自己的需要调取的一个具体的api来进行一个简单的实现了：

在src下新建一个**api文件夹，在文件夹中新建一个index.js**文件，文件中可以写一个我们要调取的api接口：

import request from '../utils/request'
export function testApi(testData) {
  return request({
    url: '/url',  //自己要调用的API接口
    method: 'post',//请求的方式
    testData
  })
}
export function testApi1(testData) {
  return request({
    url: '/url',  //自己要调用的API接口
    method: 'get',//请求的方式
    params: { testData }
  })
}

在具体的页面中我们可以这样调用我们写好的api：

<template>
  <div>
    <el-button type="primary" @click="testMyApi">测试api</el-button>
  </div>
</template>
<script>
import { testApi, testApi1 } from '../api/index.js'
export default {
  data () {
  },
  methods: {
    async testMyApi(){
      var data = 'testData'
      await testApi(data)
        .then(res => {
          console.log(res)
        })
        .catch(error => {
          console.error(error);
        })
      var data = 'testData'
      await testApi1(data)
        .then(res => {
          console.log(res)
        })
        .catch(error => {
          console.error(error);
        })
    }
  }
}
</script>

这是我工作中常用到的一个封装api的模版！

记录生活的404～