前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Axios安装封装api接口

Axios安装封装api接口

作者头像
明知山
发布2020-09-03 10:22:17
8070
发布2020-09-03 10:22:17
举报
文章被收录于专栏:前端开发随笔前端开发随笔

官方文档地址axios 安装axios

代码语言:javascript
复制
npm install axios

在main.js中添加

代码语言:javascript
复制
import Axios from 'axios'
Vue.prototype.$axios = Axios;

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

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

代码语言:javascript
复制
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中引入

代码语言:javascript
复制
import https from './axios/http'
Vue.prototype.https = https

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

代码语言:javascript
复制
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 
}

在组件中调用

代码语言:javascript
复制
//导入接口
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 {
      }
   },
	}
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-08-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档