一、Axios 是什么?
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js
http
模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
二、使用步骤
1.安装
使用 npm:
npm install axios
2. 常规使用
首先记得引入axios
import axios from 'axios';
参数解释——
- axios.get —— 采用的是get请求方式获取数据
- (`http://localhost:3000/movies_detail/${this.id}`) —— 所要请求数据的地址
mounted( ){
axios.get(`http://localhost:3000/movies_detail/${this.id}`).then(
response=>{
console.log(response.data);
this.dates = response.data;
},
error=>{
console.log(error);
}
);
}
3.二次封装方法
- 在 src 根目录下新建——utils文件夹,在其新建 request.js文件
// 引入axios
import axios from 'axios';
// 创建一个实例
const http = axios.create({
// 请求地址头信息
baseURL: '/api',
timeout: 1000
});
// 添加拦截器
// 添加请求拦截器
http.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
http.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
// 暴露 axios 实例
export default http;
在 src 根目录下新建——api文件夹,在其新建 index.js文件,封装请求数据的方法(这里是getData)
// 引入所创建的axios实例
import http from '../utils/request';
// 定义请求接口
// 定义请求首页数据的接口
export const getData = ( )=>{
// 将会返回一个promise对象,地址为所要请求数据的接口地址
return http.get('/home/getData')
}
- 在所要使用数据的页面中,调用请求数据的方法 (getData),成功获取数据之后,将数据放置所要渲染的地方即可。
// 引入请求后台接口数据的方法
import { getData } from '../api/index';
// 在页面渲染结束之后获取数据
mounted() {
// 获取后端数据
getData().then((response) => {
const { data } = response.data;
}
}