第一步 : Vue.js 2.x 如何使用axios -在组件中使用
我个人推荐我们使用 axios (基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用)
安装 axios
使用 npm
npm install axios
使用 yarn
yarn add axios
使用 axios
main.js
import axios from 'axios'
Vue.prototype.$http = axios
//执行 GET 请求
this.$http.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
详情请看axios官方文档
第二步:vue-cli3.x 配置代理,封装axios
配置代理
在项目根目录下新建vue.config.js
module.exports = {
devServer: {
host:"localhost",//要设置当前访问的ip 否则失效
open: true, //浏览器自动打开页面
proxy: {
'/api': {
target: '目标网址',
ws: true,
changeOrigin: true,
pathRewrite:{
'^/api':''
}
}
}
}
}
这样配置就完成了。
封装axios
配合代理使用
首先,根目录创建一个config目录
config目录下新建axios.js和env.js
env.js
//根据不同的环境更改不同的baseUrl
let baseUrl = '';
if (process.env.NODE_ENV == 'development') {
baseUrl = '/api';
} else if (process.env.NODE_ENV == 'production') {
//baseUrl = '测试地址';
//baseUrl = '预发布地址';
baseUrl = '生产地址';
}
export {
baseUrl,//导出baseUrl
}
axios.js
再次封装axios.js 进行全局使用
import {
baseUrl, //引入baseUrl
} from "../config/env";
import axios from 'axios';
axios.defaults.timeout = 10000; //设置请求时间
axios.defaults.baseURL = baseUrl;//设置默认接口地址
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
export function fetch(url,params={}){
return new Promise((resolve,reject) => {
axios.get(url,{
params:params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url,data = {}){
return new Promise((resolve,reject) => {
axios.post(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
main.js
//把如下代码加入main.js
import { post, fetch } from "../config/axios";
Vue.prototype.$get=fetch;
Vue.prototype.$post=post;
请求事例
//因为设置了默认axios的接口地址,所以直接写后面的接口名字就行
this.$get("/posts").then((res)=>{
console.log(res)
})