aixos API和request封装

aixos API和request封装

使用axios进行数据请求的时候，每次都要进行填写接口路劲等，我们可以对axios进行封装，同时进行请求拦截和响应拦截

在 src 下新建 request目录 ，在request目录下新建 request.js

request.js 中：

import axios from "axios"

const instance = axios.create({
    baseURL:"http://xxxxxx.net:8000",//封装到端口，调用的时候直接写后面的路径即可
    timeout:5000 //这个是设置响应时间，超过这个时间为请求超时
})

//请求拦截,每次发送请求前都活执行这里的代码
instance.interceptors.query.use(config=>{
    consolo.log("每次请求都会执行这里的代码")
   	console.log(config)//这里打印出来的都是请求报文（请求头，请求体等）
    return config
},err=>{
    return Promise.reject(err)
})

//响应拦截
instance.interceptors.response.use(res=>{
    console.log("每次请求回来执行响应then之前执行这里的代码")
    return res//通过响应拦截之后才返回then函数，所以可以在这里处理一下东西比如res.data
},err=>{
    return Promise.reject(err)
})

为了更好地管理我们的这些接口，我们把所有请求都抽取出来在一个api.js中

在request目录下新建api.js，api.js 中：

import request from './request'

// 请求首页的数据,直接写请求接口后面的接口路径
export const GetHomeLists = () => request.get('/端口号后面的路径')
/*
	
	get请求带参数的写法,这里axios文档要求传入的是一个对象，接收的写法也是对象的形式，
	// export const GetSearchTipsListData = ({params}) => request.get('/search/helper',{
	//     params: {params}
	//   })
	// export const GetSearchTipsListData = (params) => request.get('/search/helper',{
	//     params: params
	//   })
	// 最后简写
		export const GetxxxData = params => request.get('/xxx/xx',{params})
*/
// get请求带请求参数的
export const GetxxxData = params => request.get('/xxx/xx',{params})

// post请求带请求参数的，post请求要求传入的不是一个队形，直接传一个参数，不用大括号
export const GetxxxData = params => request.get('/xxx/xx',params)

发起请求

Home.vue 中：

import {GetHomeLists} from "@/request/api" //按需引入解构出来即可

created(){
    GetHomeLists()
        .then(res=>{
            if(res.errno == 0){
                console.log(res.data)	// 成功拿到所有首页数据
            }
        })
}