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

你可能感兴趣的:(Vue2.js,前端,前端框架,vue.js,学习,javascript)