[Vue]使用axios实现ajax请求

发布时间：2020-12-16 03:02:32 所属栏目：百科来源：网络整理

导读：1.定义myAjax export const myAjax=function createHttpClient(ajaxConfig) { ? let httpClient = null; ? if (ajaxConfig) { ? ? httpClient = axios.create(ajaxConfig); ? ? httpClient.interceptors.request.use(...); ? ? httpClient.interceptors.resp

1.定义myAjax

export const myAjax=function createHttpClient(ajaxConfig) {
? let httpClient = null;
? if (ajaxConfig) {
? ? httpClient = axios.create(ajaxConfig);
? ? httpClient.interceptors.request.use(...);
? ? httpClient.interceptors.response.use(...);
? else {
? ? httpClient = axios.create()
? }
? return httpClient;
}

?axios：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

详细可参考官方文档：https://www.kancloud.cn/yunye/axios/234845

2.生成ajaxMixin

export const ajaxMixin = {
  created() {
    const ajaxConfig = this.$options.myAjaxConfig
    this.$_myAjax = myAjax(ajaxConfig)
  },}

$options:当前 Vue 实例的初始化选项(在选项中包含自定义属性(myAjaxConfig)

3.在new Vue实例化前混入ajaxMixin

Vue.mixin(ajaxMixin)

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

Vue.mixin( mixin )：全局注册一个混入，影响注册之后所有创建的每个 Vue 实例，向组件注入自定义的行为。

4.在具体模块中自定义myAjaxConfig,以及调用this.$_myAjax请求后台数据

export default {
  ...
  myAjaxConfig: {
    showSpinner: true,baseURL: ‘/api/F64/‘,},methods: {  
    // 从服务器加载画面所需数据
    loadAllData(eigyousyoIdValue) {
      return this.$_myAjax
        .post(
          ‘GetGoodsInfo‘,{},{
            headers: {
              eigyousyoId: eigyousyoIdValue,}
        )
   },...}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!