vue开发，axios网络请求框架基本用法和封装

axios安装

npm install axios

axios基本用法

• 默认的get请求，参数用params追加，多个参数通过json对象的方式，例如params:‘{type:“home”,page:1}’

axios({
   
    url: 'https://api.videolog.net.cn/baidu/token',
    params: ''
}).then(value => {
   
    console.log("1.默认的get请求：", value.data)
})

• post方式及添加参数data，data里可以是一个json对象

axios({
   
    url: 'https://api.videolog.net.cn/baidu/wenxin',
    method: 'POST',
    data: 'hello'
}).then(value => {
   
    console.log("1.默认的post请求：", value.data)
})

axios常用方法

• post请求

axios
    .post("https://api.videolog.net.cn/baidu/wenxin", "vue")
    .then(value => {
   
        console.log("2.post请求测试："+value.data.data)
    })
    .catch(function (error) {
   
        // 处理错误
        console.log(error);
    });

• get请求

axios
    .get("https://api.videolog.net.cn")
    .then(value => {
   
        console.log("3.get请求测试"+value.data)
    })
    .catch(function (error) {
   
        // 处理错误
        console.log(error);
    });

axios并发请求

• 多个请求全部完成后回调。使用all方法，合并多个请求。

//并发请求
axios
    .all(
        [
            axios.post("https://api.videolog.net.cn/baidu/wenxin", "hello"),
            axios.get('https://api.videolog.net.cn/baidu/token')
        ]
    )
    .then(results => {
   
            console.log("4.两个网络请求全部完成后返回："+results.at(0).data.data)
    })

axios配置和实例

• 可以设置全局的baseUrl和超时时间

axios.defaults.baseURL = "https://api.videolog.net.cn";
axios.defaults.timeout = 30000;

• 也可以不使用全局实例，而是单独根据不同的baseURL创建各自的实例。

import axios from "axios";


const axios1 = axios.create({
   baseURL: "https://api.videolog.net.cn", timeout: 5000})
const axios2 = axios.create({
   baseURL: "https://api.videolog.net.cn", timeout: 5000})

//可以封装接口地址
export class HomeService {
   
    static loadNet() {
   
        console.log("调用共用组件")
        axios1({
   
            url: 'https://api.videolog.net.cn/baidu/token',
            params: ''
        }).then(value => {
   
            console.log("1.默认的get请求：", value.data)
        })
    }
}

//外面可以直接拿到这个实例
export {
   
    axios1
}

axios封装和拦截器

import axios from "axios";


const axios1 = axios.create({
   baseURL: "https://api.videolog1.net.cn", timeout: 5000})
const axios2 = axios.create({
   baseURL: "https://api.videolog.net.cn", timeout: 5000})

//请求拦截器
axios1.interceptors.request.use(config => {
   
    console.log("请求成功拦截器：",config)
    //可以在此处设置header
    config.headers['Content-Type'] = 'application/json;charset=UTF-8'
    // config.headers['loginToken'] = useUserStore().getToken
    return config;
}, error => {
   
    console.log("请求失败拦截器：",error)
});

//响应拦截器
axios1.interceptors.response.use(result => {
   
    console.log("响应成功拦截器：",result)
    return result;
}, error => {
   
    console.log("响应失败拦截器：",error)
    return Promise.reject(error)
});


//所有首页相关的请求放到这里。也可以单独抽出一个文件
export class HomeService {
   

    static loadTest2() {
   
        return axios1({
   
            url: '/baidu/token',
            params: ''
        })
    }
    
}

//外面可以直接拿到这个实例
export {
   
    axios1
}