vue项目中axios的封装请求

下面我将详细讲解“vue项目中axios的封装请求”的完整攻略。

1. 什么是axios

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中，它是一个封装了XMLHttpRequest和Promise的JavaScript平台应用程序接口（API）。

2. 封装Axios的三种方式

2.1 最简单的封装

在src文件夹下创建一个utils文件夹，在utils文件夹下新建一个request.js文件，代码如下：

import axios from 'axios'

export default function request(method, url, data={}) {
  return axios({
    method: method,
    url: url,
    data: method === 'POST' || method === 'PUT' ? data : null,
    params: method === 'GET' || method === 'DELETE' ? data : null,
    baseURL: 'http://localhost:3000',
    timeout: 10000,
    headers: {
      'Content-Type': 'application/json;charset=UTF-8'
    }
  }).then((res) => {
    return res.data;
  }).catch((err) => {
    console.log(err)
  })
}

2.2 使用Axios的拦截器

在src文件夹下，新建一个http.js文件，代码如下：

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000';

axios.interceptors.request.use(config => {
  console.log(config);

  config.headers['X-Token'] = '123456';

  return config;
}, error => {
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  console.log(response);

  return response.data;
}, error => {
  console.log(error);

  return Promise.reject(error);
});

2.3 使用Axios的Create创建实例

在src文件夹下，新建一个api.js文件，代码如下：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
});

instance.interceptors.request.use(config => {
  console.log(config);

  config.headers['X-Token'] = '123456';

  return config;
}, error => {
  return Promise.reject(error);
});

instance.interceptors.response.use(response => {
  console.log(response);

  return response.data;
}, error => {
  console.log(error);

  return Promise.reject(error);
});

export default instance

3. 调用Axios封装请求

在Vue项目中的<script>标签中引入封装好的请求方法，然后调用即可。

import request from './utils/request.js'

request('GET', '/user/list').then((res) => {
  console.log(res)
})

import api from './api.js'

api.get('/user/list').then((res) => {
  console.log(res)
})

4. 示例说明

4.1 示例一

在utils文件夹下新建一个用户请求的API，代码如下：

import request from './request.js'

export const getUserList = (params) => {
  return request('GET', '/user/list', params)
}

export const addUser = (params) => {
  return request('POST', '/user/add', params)
}

export const editUser = (params) => {
  return request('PUT', '/user/edit', params)
}

export const deleteUser = (params) => {
  return request('DELETE', '/user/delete', params)
}

在Vue的组件中引入并调用API：

import { getUserList } from '@/utils/user.js'

export default {
  data() {
    return {
      userList: []
    }
  },

  created() {
    this.init()
  },

  methods: {
    init() {
      getUserList({}).then((res) => {
        this.userList = res;
      })
    }
  }
}

4.2 示例二

在api.js文件中，定义用户请求的API，代码如下：

import instance from './api.js'

export const getUserList = (params) => {
  return instance.get('/user/list', { params })
}

export const addUser = (params) => {
  return instance.post('/user/add', params)
}

export const editUser = (params) => {
  return instance.put('/user/edit', params)
}

export const deleteUser = (params) => {
  return instance.delete(`/user/delete/${params.id}`)
}