vue中使用axios

Axios文档

引入axios

错误用法

在main.js中引入，需要注意的是，因为axios是第三方库，不是vue的插件，所以不能直接使用use安装插件的方式使用。

import axios from 'axios';
Vue.use(axios) 

正确用法

结合 vue-axios使用，vue-axios 是将 axios 集成到 Vue.js 的小包装器，可以像插件一样进行安装，具体用法是：

安装

npm install --save axios vue-axios

将下面代码加入入口文件：

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);

使用：
下面三种方式都可以

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

当然也可以不使用插件得到方式引入，像下面介绍的，可以直接通过Vue的原型绑定。

原型绑定引入

在原型上进行绑定, 直接写原型链, 注册一个$http，和项目其他成员协作的时候就必须注明你注册的变量名称，而使用vue-axios大家就没有歧义, 因此此用法不推荐.

import axios from 'axios'
Vue.prototype.$http= axios
// 也可以写成  Vue.prototype.$axios = axios, 调用, this.$axios;

上面这种axios使用方式没有显式地创建一个实例，但是仍然可以使用Axios库的功能。这是因为Axios在被导入时，默认导出的是一个已经创建好的全局实例，可以通过axios这个对象直接访问和使用它的方法，例如axios.get()、axios.post()等。这个默认实例已经进行了一些默认的配置，比如设置了默认的请求头、请求拦截器和响应拦截器等。

Axios封装

一般项目中都是用这种方式使用axios，首先安装axios

npm install --save axios

axios初步封装

在项目中创建http.js文件，用于对axios初步封装：

import axios from "axios"

//显式创建Axios实例
export default axios.create({
  baseURL:'http://localhost:8080/api', //服务器地址,一般会按照生产,开发环境进行不同的配置
  headers: {
    "Content-type": "application/json"
  }//指定了请求头信息。在这个例子中，Content-type被设置为application/json，表示请求的主体数据将以JSON格式进行传输。
  timeout: 5000  //请求超时前的毫秒数; 如超过规定的毫秒数请求会被终止
})

axios请求封装

新建文件api.js，引入刚刚封装好的http.js
代码如下：

import http from "../http.js";

class Api{
  getAll() {
    return http.get("/tutorials");
  }

  get(id) {
    return http.get(`/tutorials/${id}`);
  }

  create(data) {
    return http.post("/tutorials", data);
  }

  update(id, data) {
    return http.put(`/tutorials/${id}`, data);
  }

  delete(id) {
    return http.delete(`/tutorials/${id}`);
  }

  deleteAll() {
    return http.delete(`/tutorials`);
  }

  findByTitle(title) {
    return http.get(`/tutorials?title=${title}`);
  }
}

export default new Api();

使用

直接在需要使用的地方导入即可:

import Api from "@/Api/Api";