专栏首页前端开发随笔Axios安装封装api接口

Axios安装封装api接口

官方文档地址axios 安装axios

npm install axios

在main.js中添加

import Axios from 'axios'
Vue.prototype.$axios = Axios;

new Vue({
  el: '#app',
  Axios,
  components: { App },
  template: '<App/>'
})

在src中新建一个axios文件夹,建一个http.js文件 Dialog为vant组件

import axios from "axios";
import qs from "qs";
import {
  Dialog
} from "vant";

// 读取环境配置获取接口地址
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;

//post请求头
axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded;charset=UTF-8";
//设置超时
axios.defaults.timeout = 10000;

axios.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  response => {
    if (response.status == 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  error => {
    Dialog.alert({
      title: '提示',
      message: '网络请求失败,请刷新重试',
    })
  }
);

export default {
  post(url, data) {
    return new Promise((resolve, reject) => {
      axios({
          method: 'post',
          url,
          data: qs.stringify(data),
        })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        });
    })
  },

  get(url, data) {
    return new Promise((resolve, reject) => {
      axios({
          method: 'get',
          url,
          params: data,
        })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        })
    })
  }
};

在main.js中引入

import https from './axios/http'
Vue.prototype.https = https

新建个request.js文件用来放全部接口

import http from './http'

//Object.assign拷贝每个接口固定传参
const post = (url, data) => http.post(url, Object.assign({
  api_key: "133132",
  sign: "133132"
}, data))


/**
 * 传一个参数的
 * @param {*}
 */
const getClassSchedule = (schedule_id) => post('getClassSchedule', {
  schedule_id,
})

/**
 * 传多个参数的
 * @param {*}
 * page:1
 * limit:10 最大页数
 */
const getCarouselList = ({
  page,
  limit
}) => post('getCarouselList', {
  page,
  limit,
})

/***
 * 不传参数的
 * @param {*}
 */
const getUserInfo = () => post('getUserInfo', {})

//接口导出
export {
getClassSchedule,
getCarouselList,
getUserInfo 
}

在组件中调用

//导入接口
import { getClassSchedule ,getCarouselList,} from "../axios/request";
export default {

  methods: {
  	//传一个值的
	async getmore() {
     const res = await getClassSchedule(id);
      if (res.status == 1) {
      } else {
      }
    },
	//传多个值的
	async getbanner() {
      const res = await getCarouselList({ page: 1, limit: 10 });
      if (res.status == 1) {
      } else {
      }
    }
	//不传值的
	async getinfo() {
      const res = await getUserInfo();
      if (res.status == 1) {
      } else {
      }
   },
	}
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue/cli代理axios请求跨域接口

    wePanda
  • Dart判断运算符

    wePanda
  • less引入到Vue处理Css预编译

    wePanda
  • axios POST提交数据的三种请求方式写法

    总结: 1、从jquery转到axios最难忘的就是要设置Content-Type,还好现在都搞懂了他们的原理 2、上面三种方式会对应后台的请求方式,这个也要注...

    跟着阿笨一起玩NET
  • 周五推荐时间:博客3期

    “ 已经推荐两期了,这是第三期,菜单可以查看往期推荐,以下博客有Java Web专题:SSM系列讲解;墙裂推荐;还有第三位,讲解了比较复杂的SQL查询是如何完成...

    赵腰静
  • 双指针,集合问题-LeetCode 344、345、347、349、350

    编写一个函数,其作用是将输入的字符串反转过来。输入字符串以字符数组 char[] 的形式给出。 不要给另外的数组分配额外的空间,你必须原地修改输入数组、使用 O...

    算法工程师之路
  • Android界面启动流程(二)

    aruba
  • 面试官:Java Optional 为什么设计成不可序列化的?

    Optional 自 Java8 发布以来深受喜爱。很多人认为它是来解决“空”异常问题的,其实它并不能解决空异常,它只是一个容器,这个容器内的对象可能为空,需要...

    业余草
  • 虚拟机创建后该如何获取IP地址并访问互联网实用教程

    之前在做项目的时候主机IP地址、网关、DNS、子网掩码等都是公司或者对方直接给提供的,但是如果我们自己想搭建一台虚拟机或者一台集群的话,手头又没有IP地址,该肿...

    Python进阶者
  • 电商网站架构探索|SOA分布式架构详解

    目前很多的企业都有自己的电商网站,但随着业务量的增长,并发量高了。由于平台架构的一些不足,会导致一系列严重的问题,电子商务平台的安全性,承受能力也经受着严峻的考...

    数商云市场营销总监

扫码关注云+社区

领取腾讯云代金券