- $ npm install axios
使用之前需要先了解axios的基本知识：
1. Axios基础用法（get、post、put 等请求方法）
先介绍一下，Axios常用的几种请求方法有哪些：get、post、put、patch、delete
get：（一般用于）获取数据
post：提交数据（表单提交+文件上传）
put：更新（或编辑）数据（所有数据推送到后端（或服务端））
patch：更新数据（只将修改的数据推送到后端）
delete：删除数据
题外话，一般公司在实际开发项目过程中：
（1）post：一般用于新建
（2）put：一般用于更新（适合数据量比较少的更新）
（3）patch：一般用于数据量比较大；假如一个表单的数据量很大，有很多项，使用put的话，全部数据推送一次是比较耗性能的，这个时候可以考虑用patch，只将修改的数据推送到后端
封装：
（1）在src下创建utils文件夹，并创建request.js，添加代码：
- import axios from 'axios'
- //接口主域名
- const baseURL = 'http://localhost/phpcmsApi5';
- //利用axios.create()创建axios实例，并配置基地址
- let Request = axios.create({
- baseURL: baseURL,
- timeout:3000,
- headers: {
- 'Content-Type': 'application/json;charset=UTF-8',
- },
- params:{
- 'aid': 1
- },
- method:'GET'
- })
- //请求拦截器
- Request.interceptors.request.use(config => {
- return config
- },err=>{
- return Promise.reject(err);
- })
- //响应拦截器
- Request.interceptors.response.use(resp => {
- //检测到401（未登录）跳转到登录页面
- if (resp.data.resultCode === 401) {
- window.location.href = '/login'
- }
- return resp
- },err=>{
- return Promise.reject(err);
- })
- //模块导出
- export default function apiRequest(options){
- // interceptors(instance)
- return Request(options)
- }
（2）为了方便全局调用，可以挂载在vue下，在main.js添加代码：
- import apiRequest from '../utils/request.js'
- Vue.prototype.$apiRequest = apiRequest;
这样都可以通过this.$apiRequest的方式请求接口了
（3）请求方式：
- this.$apiRequest({
- 'url': 'api.php?op=api&action=lists',
- 'method': 'POST',
- 'params': {
- 'catid': 6,
- 'num': 2,
- }
- }).then(res => {
- console.log(res)
- });
文章点评