Vue封装axios

什么是axios

• axios 是一个基于 promise 的HTTP库。
• 支持 promise API。
• 具备请求和响应拦截，以及转换请求和响应数据。
• 取消请求
• 自动转换 JSON 数据
• 从node.js 创建 http 请求

安装axios

使用npm:

npm install axios --save

使用yarn

yarn add axios

使用CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

引入axios

创建 request.js 文件，在文件中映入 axios

import axios from "axios"

创建axios实例

方式一：axios.defaults 全局配置

axios.defaults.baseURL = 'http://localhost.com/api/';
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
axios.defaults.timeout = 10000;

方式二：使用axios.create([config]) 创建实例。

const service = axios.create({
	// axios中请求配置有baseURL选项，表示请求URL公共部分： http://localhost.com/api/
	baseURL: process.env.Vue_APP_BASE_API,
	// 请求头部
    headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
   	// 超时时间
	timeout: 10000,
})
export default service

请求拦截器

service.interceptors.request.use(config => {
  // 在发送请求之前的处理；比如：设置请求头部Token
  config.headers['token'] = "token...";
  return config
}, error => {
   // 对请求错误的处理
   Promise.reject(error)
})

响应拦截器

service.interceptors.response.use(res => {
  // 对响应数据做处理
  return res.data
},error => {
  // 对响应错误做处理
  switch (error.response.status) {
    case 401:
     // 对401的操作
      break;
    case 408:
      // 对408的操作
      break
    case 500:
        // 对500的操作
      break
    default: Promise.reject(error)
  }
})

设置API

创建 api.js 文件，在文件中引入 request.js，并设置API接口

import request from '@/utils/request'
export function userList(data,qurey) {
  return request({
    url: '/user',  // 接口地址
    method: 'POST', // 请求方式
    data: data, // 需要发送个服务去的数据
    params: qurey // url地址拼接的数据
  })
}

在页面中使用axios

在 user.vue 中引入API，在methods发送请求

import {userList} from '@/api/api'
data() {
  return {
  	// 发送个服务器的数据
  	form:{
  	  username: "Tom",
  	  password: "123456"
  	},
  	qurey: {
  	  page: 1,
  	  limit: 10
  	}
  }
},
methods: {
  getUserList() {
  userList(this.form,this.qurey).then(response => {
  // 对请求返回的数据做处理
  })
}