当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue封装api

vue封装api

2020年07月27日  | 移动技术网IT编程  | 我要评论

**

在src目录下，新建api文件夹，在api文件夹下创建http.js和api.js。

**

1、api.js。主要用来统一管理项目所有api请求。如下：

/** 
 * api接口统一管理
 */
import {
  get,
  post
} from './http'
export const getTokenApi = p => get('/wkhome/login/tokenApi', p); //时间戳&&令牌
export const shareSDK = p => post('/wkhome/download/share', p); //获取分享配置

2、http.js。主要用来输出api，供外部引入。如下：

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据
// 环境的切换  （这段自己改一下）
if (location.hostname === 'localhost') {
  axios.defaults.baseURL = 'http://cs.ht'
} else if (location.hostname === 'cs.mt.') {
  axios.defaults.baseURL = 'http://cs.ht.'
} else if (location.hostname === 'mt.' || location.hostname === 'www.' || location.hostname === '') {
  axios.defaults.baseURL = 'http://api.'
}
/* */

axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err.data)
    })
  });
}

2.在组件中调用api接口。例如：

/**
引入api.js文件
 */
 import {
  getTokenApi,shareSDK 
} from "@/assets/request/api";

/**
调用
 */
  getTokenApi({//不带参数
  }).then(res => { 
  //成功时执行
  }).catch(error => {
   //失败后执行
  })
  
   shareSDK ({ //带参数
          userPid: infoUserPid //参数
        }).then(res => {
        //成功时执行
        }).catch(error =>{
        //失败后执行
        })

本文地址：https://blog.csdn.net/weixin_43301427/article/details/107542190

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网