首先 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 请求分成了三个文件, 分别有各自的配置.)
首先, 新建 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
新建 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
}
})
}
在 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)
},
}
寄语: 各位, 当时过思路的时候, 很简单, 实际写的时候, 文档有可能很难看. 所以还请多多谅解, 如果有问题, 还请直言不讳, 谢谢.