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)//可以在此处设置headerconfig.headers['Content-Type'] = 'application/json;charset=UTF-8'// config.headers['loginToken'] = useUserStore().getTokenreturn 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
}