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

2023-12-13 21:38:14

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
}

文章来源:https://blog.csdn.net/yu540135101/article/details/134824253
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。