在 Vue 项目中使用 axios 的三种方式

首先 npm i axios, npm 下载 axios 插件.

第一种方式: 直接在 vue 组件中导入 axios, 并直接引用.

注意一点, axios 是一个基于 promise 网络请求库, 这意味着, 你必须使用 ES6 的 then() 或者 ES8 的 async/await 来处理 Promise 实例对象. (各位, 我这里用的是 async/await.)

components/Hello.vue:
// 导入 axios
import axios from 'axios';

// 方法
methods: {
        // async/await 
        async initCartList() {
            // 解构赋值          // 发起 axios 请求
            const { data:res } = await axios({
                method: 'GET',
                url: 'https://www.xxxx.cn/api/cart',
            });
            // console.log(res);
            if (res.status === 200) return  this.data = res.list;
        },
}

第二种方式: 在 Vue 项目的入口文件 main.js 配置全局 axios

main.js 文件:
// 导入 axios
import axios from 'axios' 

// 全局配置 axios 请求的根路径, 可以不写.
axios.defaults.baseURL = 'http://www.xxxx.top:8080' 
// 把 axios 挂载到 Vue 原型上. 今后,在每个 .vue 组件中发起请求,直接调用 this.$http 即可.
Vue.prototype.$http = axios 

在 Hello.vue 组件中使用:

  // 方法
  methods: {
    // 发起 axios get request
    async getInfo() {
      // 解构赋值
      const { data: res } = await this.$http({
        method: 'GET',
        url: '/api/getbooks'
      })
      console.log(res)
    }
  },

第三种方式: 通俗易懂,不好写, 但处理过多接口时很方便.(怎么说, 把 axios 请求分成了三个文件, 分别有各自的配置.)

1. 首先, 新建 scr/utils/request.js 文件

// 导入 axios
import axios from 'axios'

// 调用 axios.create() 函数, 创建一个 axios 的实例对象, 用 request 来接收.
const request = axios.create({
  baseURL: 'http://www.xxxx.top:8000' // 指定请求的根路径
})

export default request

2. 新建 src\api\articleAPI.js 文件
   这里是获取频道下的文章列表的例子, 你也可以再在 api 文件下新建一个新的接口文件.

// 导入 axios 实例对象
import request from '@/utils/request.js'

// 封装获取频道下的文章列表函数
export const articleList = function(id, timestamp) {
  return request.get('/v1_0/articles', {
    params: {
      channel_id: id,
      timestamp: timestamp
    }
  })
}

3. 在 Hello.vue 按需导入需要的接口.

// 按需导入获取文章列表数据的 API
import { articleList } from '@/api/articleAPI.js' 

// 方法
methods: {
    // 调用获取频道下的文章列表 API
    async initArticleList() {
      const { data: res } = await articleList(参数 id, 参数 timestamp)
      this.list = res.data.results
      console.log(this.list)
    },
}