vue实战之axios

​前言

今天还将继续  基于vue、element的项目实战  这个专题，这一章节将向大家讲解http请求的axios封装，易用、简洁且高效的http库。

1、axios的介绍

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

2、安装axios

yarn add axios
           

查看package.json文件 "axios": "^0.21.1"

安装成功

3、使用

在src中创建utils文件夹，其中创建axios.js文件

utils是存放一些公共方法（一般情况）

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
// 创建实例
let service = axios.create({
  baseURL: testApi, // 接口地址
  timeout: 5000 // 请求超时时间
})
// 请求拦截器（request)
service.interceptors.request.use(config => {
if (token) { // 此处是登陆返回的token，添加到请求头
    config.headers = {
'Authorization': "Token " + token // token值，具体规则和后端定义
    }
  }
return config
}, error => {
Promise.reject(error)
})
// 响应拦截器（respone)
service.interceptors.response.use( response => {
let res = response.data
if (res.code !== 200) { // 具体的参数值按定义修改
    Message({
      message: res.message,
type: 'error',
      duration: 5 * 1000
    })
// 按照后端约定处理错误信息
if (res.code === 500) {
// 逻辑代码
    } 
return Promise.reject('error')
  } else { // res.code === 200, 成功返回data
return response.data
  }
},
error => {
  Message({
    message: error.message,
type: "error",
    duration: 5 * 1000
  })
return Promise.reject(error) // 抛出错误信息到前端
})
export default service // 暴露service文件
           

接下来就是api方法的引用

4、src下创建api文件夹

模块接口写在一起

示例：user.js

import request from '@/utils/axios'
​
export function login(params) {
  return request({
    url: '/test/login', // 接口地址
    method: 'get', // 请求方式mock.js
    data: params // 请求参数
  })
}
           

vue文件中引用login方法

import { login } from '@/api/user'
// 最后就是调用方法
           

5、注意

所有的参数均需要依据后端接口制定方灵活配置

6、下期预告

前端模拟数据接口工具mock.js的使用

添加小站回复：axios视频教程，获取该篇教学视频。

长按二维码识别添加小站

1、如果你有好的技术文章。

2、如果你有需要的技术分享主题。

3、如果你有面试上的问题(包括简历、面试题)

4、那就快来联系小站，让小站为你尽心尽力！