Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。
简介
Axios 是一个用于浏览器和Node的基于承诺的简单HTTP客户端。它提供了一个易于使用的库,占地面积小。它还有一个可扩展的接口和一些伟大的功能,如JSON数据的自动转换,以及客户端支持对XSRF的保护,等等。
在服务器端(Node),它依赖于本地Node.js HTTP模块,而在客户端(浏览器),它使用XMLHttpRequests。由于是同构的,Axios是少数几个在浏览器和服务器端都可以毫不费力地使用的库之一。
如果我们对Axios进行常规要求,我们会收到默认的实例。假设我们想添加一个自定义的配置,比如一秒钟的超时,这在const axios = require(‘axios’) 中是不容易实现的?
这就是Axios.create与Axios的常规 "require "相比的优势所在,尽管两者都会返回Axios的实例。通过Axios.create,我们可以设置一个类似于baseUrl 的配置,所有的调用都只需要HTTP调用的URI,而不用完整的URL。
安装
npm
npm install axios
bower
bower install axios
yarn
yarn add axios
CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
使用
Axios.create本质上是一个创建Axios新实例的工厂。用 Axios.create 来使用 Axios 可以用自定义配置来创建一个新的Axios实例。用Axios.create创建的带有自定义配置的Axios实例有助于我们在该实例的所有调用中重复使用所提供的配置。
axios.create(config) 对axios请求进行二次封装
- 根据指定配置创建一个新的 axios ,也就是每个axios 都有自己的配置
- 新的 axios 只是没有 取消请求 和 批量请求 的方法,其它所有语法和 axios 一致
- 为什么要这种语法?
- 需求,项目中有部分接口需要的配置与另一部分接口的配置不太一样
- 解决:创建2个新的 axios ,每个都有自己的配置,分别对应不同要求的接口请求中
1. src/utils/index.js
import axios from 'axios';
const BASEURL = process.env.NODE_ENV === 'production' ? '' : '/devApi';
const service = axios.create({
baseURL: BASEURL,
timeout: 1000,
});
console.log(process.env.NODE_ENV, process.env.BASE_URL);
service.interceptors.request.use(req => {
return req;
}, function (error) {
return Promise.reject(error)
});
service.interceptors.response.use(function (res) {
console.group('本次请求地址是:' + res.config.url);
console.log(res);
console.groupEnd();
return res;
}, function (error) {
return Promise.reject(error);
});
export default service;
2. src/api/index.js
import service from '@/utils'
export function getSynew(params = {}) {
return service.request({
method: 'get',
url: '/synew',
params
})
}
export function getNewDetail(id) {
return service.request({
method: 'get',
url: `/new/${id}`,
})
}
3. 配置跨域(src/vue.config.js)
devServer: {
proxy: {
"/api": {
target: "替换为自己的地址",
changeOrigin: true,
pathRewrite: {
"^/api": "",
},
},
}
},
pluginOptions: {}
4. 组件中
index.vue
import { onMounted } from "vue";
import { getSynew } from '@/api'
export default {
name: 'Index',
setup() {
onMounted(() => {
reqSynew();
})
function reqSynew() {
getSynew().then(res => {
console.log(res);
})
}
return {
reqSynew
};
},
};
new.vue
import { onMounted} from 'vue'
import { useRoute } from 'vue-router'
import { getNewDetail } from '@/http/api'
export default {
name: 'New',
setup() {
const initData = reactive({
newsList: [],
})
const route = useRoute()
const reqNewDetail = (() => {
getNewDetail(route.params.id).then(res => {
initData.newsList = res.data[0]
initData.title = (initData.newsList[0].iscompanynews == 1 ? '公司新闻' : '行业资讯')
})
})
onMounted(() => {
reqNewDetail();
})
return { reqNewDetail }
}
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)