axios在vue中的使用

一、Axios是什么

• Axios是一个基于promise的HTTP库（类似于jQuery的Ajax，用于HTTP请求）
• 可以用于浏览器和node.js（既可以用于客户端也可以用于node.js编写的服务端）

二、Axios有哪些特性

• 支持promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

三、Axios浏览器支持

四、安装

1.使用 npm:

$ npm install axios

2.使用 bower:

$ bower install axios

3.使用 cdn:

五、用法（vue项目已搭建）

1. Axios基础用法（get、post、put 等请求方法）

先介绍一下，Axios常用的几种请求方法有哪些：get、post、put、patch、delete

get：（一般用于）获取数据

post：提交数据（表单提交+文件上传）

put：更新（或编辑）数据（所有数据推送到后端（或服务端））

patch：更新数据（只将修改的数据推送到后端）

delete：删除数据

题外话，一般公司在实际开发项目过程中：

（1）post：一般用于新建

（2）put：一般用于更新（适合数据量比较少的更新）

（3）patch：一般用于数据量比较大；假如一个表单的数据量很大，有很多项，使用put的话，全部数据推送一次是比较耗性能的，这个时候可以考虑用patch，只将修改的数据推送到后端

以上这些题外话，只是一般的常规用法，不能代表一定要这样用；当然了，你可能会说我用post来获取数据，行不行？这个当然行了，绝对没问题！具体怎么用还是前后端一起商量着决定，以免发生不愉快的肢体冲突！

哈哈哈，严重了啊，开个玩笑！

 （1）get 请求

下面了解一下请求信息---

 

                                             

                                            

Status Code:304 Not Modified---304是重定向；正常情况下，第一次访问接口的时候返回的 都是200；当你第二次访问接口的时候，如果数据没有变化， 那么浏览器会自动识别返回一个状态304，代表数据没有更改 、重定向；相当于重定向到你刚刚访问的资源，这样的话会加载 更快！ 

（2） post 请求

了解一下，post两种请求方式的Content-Type和参数有哪些不同---

• applicition/json：如下图
  

• form-data：如下图

（3）put、patch 请求

• 说明一下，put和patch请求与post请求用法一样类似，同样有applicition/json和form-data，为了节省时间就不过多赘述了，简单写一下！

 

（4）delete 请求

• delete请求与前四种请求稍有一点不同：delete请求有时候需要把参数拼接到URL上，有时候像post请求那样把参数放在请求体里面。至于具体怎么调用，需要和后端商量好！

了解一下，把参数拼接到URL上和放在请求体里面有什么不同---

• params（把参数拼接到URL上），如下图：

• data（把参数放在请求体里面），如下图：

（5）并发请求

并发请求：同时进行多个请求，并统一处理返回值。

 

2. Axios进阶用法（实例、配置、拦截器、取消请求等）

（1）axios实例和配置

（2）拦截器

 

（3）取消请求 

 

3.Axios进一步封装，在项目中的实际应用

• 在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。axios有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。
• 在一个完整的项目中，和服务端的交互会很频繁，一个项目会有很多请求，冗余代码很多。所以将请求封装，统一管理还是很有必要的。
• 本文介绍的axios的封装主要目的就是在帮助我们简化项目代码和利于后期的更新维护。

（1）第一步：src/api/request.js

import axios from 'axios'
// import Vue from 'vue';
// import store from '../store';
// import {router} from '../router/index';

// let vm = new Vue();

const instance = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 3000,
  // headers: {
  //   post: {
  //     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  //   }
  // }
})

// 请求拦截
instance.interceptors.request.use(config => {
  // 自定义header，可添加项目token
  // if (store.state.app.token) {
  //   config.headers.token = store.state.app.token;
  //   config.headers.timestamp = new Date().getTime();
  // }
  return config;
}, error => {
  return Promise.reject(error);
})

// 响应拦截
instance.interceptors.response.use(response => {
  // const resCode = response.status;
  // if (resCode === 200) {
  //   return Promise.resolve(response);
  // } else {
  //   return Promise.reject(response);
  // }
  return response;
}, error => {
  // const resCode = error.response.status;
  // switch (resCode) {
  //   case 401:
  //     vm.$Message.error(error.response.data.message);
  //     store.commit('logout', this);
  //     store.commit('clearOpenedSubmenu');
  //     // console.log('token-0', store.state.app.token);
  //     router.replace({
  //       name: 'login'
  //     });
  //     break;
  //   case 404:
  //     vm.$Message.error('网络请求不存在');
  //     break;
  //   case 500:
  //     vm.$Message.error('服务器连接错误');
  //     break;
  //   // 其他状态码错误提示
  //   default:
  //     vm.$Message.error(error.response.data.message);
  // }
  return Promise.reject(error);
})

/*
 *封装get方法
 *@param{String} url [请求地址]
 *@param{Object} params 请求参数
 */
export function Get(url, params) {
  return new Promise((resolve, reject) => {
    instance.get(url, {
      params: params
    }).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}

/**
 *封装post方法
 *@param{String} url 请求地址
 *@param{Object} params 请求参数
 */
export function Post(url, params) {
  return new Promise((resolve, reject) => {
    instance.post(url, params).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}

/**
 *封装put方法
 *@param{String} url 请求地址
 *@param{Object} params 请求参数
 */
export function Put(url, params) {
  return new Promise((resolve, reject) => {
    instance.put(url, params).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}

/**
 *封装patch方法
 *@param{String} url 请求地址
 *@param{Object} params 请求参数
 */
export function Patch(url, params) {
  return new Promise((resolve, reject) => {
    instance.put(url, params).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}

/**
 *封装delete方法
 *@param{String} url [请求地址]
 *@param{Object} params [请求参数]
 */
export function Delete(url, params) {
  return new Promise((resolve, reject) => {
    instance.delete(url, {
      params: params
    }).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}

（2）第二步：src/api/index.js

import {Get,Post,Put,Patch,Delete} from "@/api/request";

export default {
  getListData: (params) => {
    return Get('../../static/data.json',params);
  },
  postListData: (params) => {
    return Post('../../static/data.json',params);
  },
  deleteListData: (params) => {
    return Delete('../../static/data.json',params);
  }
}

（3）第三步：src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store'
import Api from './api/index';

Vue.config.productionTip = false
Vue.prototype.$axios = Api;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

（4）第四步：src/components/HelloWorld.vue