前端开发：axios在项目中的应用-阿里云开发者社区

前端开发：axios在项目中的应用

2022-12-07 41

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端开发：axios在项目中的应用

用到的模块：

Vue: https://cn.vuejs.org/v2/guide/

Axios: http://www.axios-js.com/zh-cn/docs/

vant: https://youzan.github.io/vant/#/zh-CN/intro

可参考文章

1、接口配置

server/contactApi.js

// 统一接口管理
const CONTACT_API = {
    // 获取联系人列表
    getContactList: {
        method: "get",
        url: "/contactList.json"
    }
}


export default CONTACT_API

2、配置全局的Http请求函数

server/http.js

import axios from "axios";

import contactApi from "./contactApi"
import {Toast} from "vant"

let instance = axios.create({
baseURL: "/",
timeout: 1000 // 毫秒
})

// 包装请求方法的容器
const Http = {}

for(let key in contactApi){
let api = contactApi[key]

// async 作用，避免进入回调地狱
Http[key] = async function(data){
let response = {};
try{
response = await instanceapi.method
}catch(err){
response = err;
}
return response;
}
}

// 请求拦截器
instance.interceptors.request.use(
config => {
Toast.loading({
mask: false,
duration: 0, // 一直存在
forbidClick: true, // 禁止点击
message: "加载中..."
})
return config;
},()=>{
Toast.clear()
Toast("请求出错")
}
)

// 添加响应拦截器
instance.interceptors.response.use(
res => {
Toast.clear()
return res.data;
},()=>{
Toast.clear()
Toast("请求出错")
}
)

export default Http

3、全局挂载

main.js


// 把Http挂在到vue实例上，全局可用
Vue.prototype.$Http = Http

4、视图中调用http

views/VantIndex.vue

<template>
  <div>
    <!-- 联系人列表 -->
    <van-contact-list :list="list" />
    
  </div>
</template>

<script>
// 引入组件
import { ContactList } from "vant";

export default {
  name: "vantIndex",

  data() {
    return {
      list: []
    };
  },

  // 注册组件
  components: {
    [ContactList.name]: ContactList
  },

  methods: {
    async getContactList() {
      let res = await this.$Http.getContactList({ name: "Tom" });
      this.list = res.data;
    }
  },

    // mounted creared
  creared() {
    this.getContactList();
  }
};
</script>

5、修改路由

router.js

routes: [
      {
        path: '/',
        name: 'index',
        component: () => import('./views/VantIndex.vue')
    }
  ]

6、测试数据 public/contactList.json

{
    "code": 200,
    "data": [
        {
            "name": "张三",
            "tel": "13000000000",
            "id": 1
        },
        {
            "name": "李四",
            "tel": "13000000001",
            "id": 2
        },
        {
            "name": "王五",
            "tel": "13000000002",
            "id": 3
        }
    ]
}