vue实战之axios

Posted 2022-02-17 前端e站

​前言

今天还将继续  基于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、那就快来联系小站，让小站为你尽心尽力！