如何使用axios

如何使用axios

一、axiox是一个优秀的HTTP库， 当我们想要使用axios时，应该先下载依赖npm install axios --save

首先
新建utils文件夹，创建request.js文件
1、引用依赖

import axios from "axios"

2、axios.create的使用

const axios = axios.create({
    baseURL: 'https://some-domain.com/api/',//请求的基本地址、域名
    timeout: 1000,//请求的超时时长
    method:'get,post,put,patch,delete',//请求方法
    headers: {'X-Custom-Header': 'foobar'}//设置请求头
    ....
    //一般我们请求接口只用得到设置公共的基本路径和请求多长时间超时即可
  });

3、axios拦截器

axios.interceptors.request.use(function (config) {  
    //在发送请求之前做些什么
    return config;
}, function (error) {  
    //对请求错误做些什么
    return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {  
    //对响应数据做点什么
    return response;
}, function (error) {  
    //对响应错误做点什么
    return Promise.reject(error);
});

4、记得最后抛出！！！

export default axios

其次
新建api文件夹,创建js文件
1、引用封装好的request.js文件

import axios from "../utils/request"//注意路径！！！

2、抛出请求

//方法一
export function func(data){
    return axios({
        url:'/user/list.json',//路径
        method:'',//请求方式
        data:data//传递的参数
    })
}  
方法二  
//发起get请求
export function func(){
    return axios.get('/user/list.json')
}  

最后
在想要显示的页面引用抛出的接口请求
例如 使用import方法

import {func} from "./api/user"

调用接口

func().then((res)=>{
  console.log(res);//接口请求成功
}).catch((err)=>{
  console.log(err);//接口请求失败
})