Axios请求封装

Axios请求封装

封装: 将当前的某个请求单独放在一个目录中,方便.

第一步: 在src中新建一个目录和文件(完成数据请求)

​ request/requres.js

1. 封装axios请求源码

import axios from 'axios';
const ins=axios.create({
    baseURL:'http://kumanxuan1.f3322.net:8001',
    timeout:5000
})

// 请求拦截
    ins.interceptors.request.use(config=>{
        console.log('每次请求前都会执行这里的代码');
        return config;
    })

// 响应拦截
    ins.interceptors.response.use(res=>{
        console.log('每一次响应都会执行这里的代码');
        return res;
    })

// 导出ins
export default ins;

2. 封装axios讲解

1) 引入axios

import axios from 'axios';

2) 给当前请求添加一些配置

const ins=axios.create({
	//1.配置url(请求地址)
    baseURL:'请求接口地址',
    
    //2.请求超时时间(毫秒)
    timeout:5000
})

3) 请求拦截

ins.interceptors.request.use(config=>{
    console.log('每次请求前都会执行这里的代码');
    return config;
})


/* 
    token
    登录=> 账号,密码
    正确的账号密码,去登录接口中获取登录信息
    此时登录信息中包含了token, 可以把token的值的值存储起来
    localStorege.setItem('token',res.data.token)

    在请求拦截的位置获取token,
    let token=localStorage.getItem('token);
     if(token){
        //如果有token,证明登录过,把token设置到请求头中
        config.headers[X-Nideshop-Token]=token
     }
*/

4) 响应拦截

ins.interceptors.response.use(res=>{
        console.log('每一次响应都会执行这里的代码');
        // 这里的res就是你请求到的数据
        return res;
    	//return res.data;
})

5) 将ins开放(导出)出去

export default ins;

第二步: 在request中再创建一个文件(设置数据请求)

​ request/api.js

1. 引入request请求文件

import request from './request.js';

2. 请求不同接口中的数据

1. 导出
	export const GetHomeList = ()=>request.get("index/index");
	export const 名 = ()=>request.get("路径");



/*
    request 就是 axios
    request.get('路径/路径') <=> axios.get('http://xxx.xx/路径/路径')
    上面的语句就相当于(上面是箭头函数)
    export const 名 = function(){
        return request.get('/路径');
    }
    也就是说:
        名=request.get('/路径').then(res=>{})
        名=axios.get('/路径').then(res=>{})
        名().then
        以上三者是等价关系
*/

第三步: 在vue文件中使用封装后的axios接口

1. 引入封装的axios函数

import {GetHomeList} from '@/request/api.js';

2. 发起axios请求

created(){
	GetHomeList()
      .then(res => {
        console.log(res);
        console.log(res.data);
        //eg: 请求接口中的轮播图数据
        this.banner = res.data.data.banner;
      })
      .catch(err => {
        console.log(err);
      })
   }
}