ATP应用测试平台——关于axios的配置使用

Posted 北溟溟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ATP应用测试平台——关于axios的配置使用相关的知识,希望对你有一定的参考价值。

前言

该篇是应某个粉丝的要求讲解一下关于axios请求组件的使用,其实axios组件类似我们以前使用过的jQuery中的ajax组件,都是用于进行http网络请求的组件。axios组件在前后端分离项目中使用的更加广泛,也更易集成,尤其是其拦截器的功能,使网络请求更加健壮、灵活。今天我们就讲一下如何使用axios组件发送网络请求,本小节依然使用我们的ATP应用测试平台进行相关案例的演示。源码地址:https://gitee.com/northcangap/atp。喜欢的朋友可以star一下哦,创作不易。

正文

①安装axios组件

命令:npm i axios -s

②配置axios:创建一个axios实例,可以设置axios的访问前缀,前后置拦截器

import axios from "axios";

export const http = axios.create({
   baseURL:'/',
});
//前置拦截器:可以设置请求头的相关参数
http.interceptors.request.use(
    (config) => {
        return config;
    },
    (error) =>{
        return Promise.reject(error);
    }
);
//后置拦截器:可以对响应的结果做进一步的处理返回给前端
http.interceptors.response.use(
    (data) => {
        return data;
    },
    (error) =>{
        return Promise.reject(error);
    }
);

 ③main.js中引入axios实例供全局使用

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from '@/router';
import {http} from '@/axios/index';
import qs from 'qs';
import '@/util/derective'
import App from '@/App.vue';
import Print from 'vue-print-nb'

Vue.use(Print);
Vue.use(ElementUI);
Vue.prototype.$http = http;
Vue.prototype.$qs = qs;
Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

 ④使用axios发起网络请求,this.$http可以使用get、post、delete、put等restful风格的任意请求,这里以post\\delete等为例

 ⑤验证结果

结语

关于axios的使用及实战到这里就结束了,我们下期见。。。

以上是关于ATP应用测试平台——关于axios的配置使用的主要内容,如果未能解决你的问题,请参考以下文章

ATP应用测试平台——关于vue中Vue-Quill-EditorMavon-EditorTinymce等多种富文本编辑器的集成使用

(十九)ATP应用测试平台——springboot集成RocketMQ案例实战

(十四)ATP应用测试平台——使用docker-compose一键式安装ATP应用测试平台的依赖服务

ATP应用测试平台——关于网页表格的打印及PDF下载的实战案例

(十八)ATP应用测试平台——关于springboot应用监控的那些事

(十八)ATP应用测试平台——关于springboot应用监控的那些事