Vue —— axios的二次封装

文章目录

• 前言
• 一、Axios 是什么?
• 二、使用步骤
  • 1.安装
  • 2.常用使用
  • 3.二次封装方法

---

一、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;
    }
}