封装axios和api的几种方式？

1.简单的的封装axios

import axios from 'axios'//首先引入axios
//创建一个实例
const api = axios.create({
    baseURL: '', // 所有请求的公共地址部分
    timeout: 　3000 // 请求超时时间 这里的意思是当请求时间超过5秒还未取得结果时 提示用户请求超时
})
//request拦截器
// 请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置
// interceptors axios的拦截器对象
api.interceptors.request.use(config => {
     // config 请求的所有信息
    // console.log(config);
    return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行
}, err => {
    // 请求发生错误时的相关处理 抛出错误
   Promise.reject(err)
})

//response拦截器
api.interceptors.response.use(res => {
    // 我们一般在这里处理，请求成功后的错误状态码 例如状态码是500，404，403
    // res 是所有相应的信息
    console.log(res)
   return Promise.resolve(res)
}, err => {
    // 服务器响应发生错误时的处理
    Promise.reject(err)
})

export default api

封装接口

import api from '../index.js';

下面是简写的形式
// getXXX 自定义的接口名字
export const getXXX = (params) => api.get(`/apigb/v1/component`, { params})

export const postXXX = (params) => api.post(`/apigb/v1/component/update-info`, params)


// 下面是详细的写法
export const xxxx = (params) => api({
        url: '', // 请求地址
        method: 'post', // 请求方式
        // data: params, // (一般post请求，我们习惯使用 data属性来传参)
        params: params //(一般get请求，我们习惯使用params属性来传参）
        // 注意：data，和 params 两个属性传参使用，并不是固定的，也可以调换使用。
})

2.第二种小程序

const api = {
  get: (url,params) => request('GET',url,params),
  post: (url,params) => request('POST',url,params)
}

const request = (method,url,params) => {
  let baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1'; // 代表基础路径
    wx.showLoading({ // 开启加载
      title: '加载中',
    })
    return new Promise((resolve,reject) => {
      wx.request({
          url: baseUrl + url, //仅为示例，并非真实的接口地址
          data: params || '',
          method: method,
          success (res) {
          //   console.log(res);
            wx.hideLoading(); // 隐藏加载
            resolve(res.data.message);
          },
          fail (err) {
            reject(err)
          }
        })
    })
}

export default api;

3.第三种

const api = (url,params) => { // url,params 都是形参 url 就代表请求的路径
  return new Promise((resolve,reject) => { // resolve 代表成功，对应的就是 .then reject失败对应的就是 .catch
    let baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1'; // 代表基础路径
    let data  = params? params.data : '';
    let method  = params? params.method : 'GET';
    // console.log(params);
    wx.showLoading({ // 开启加载
      title: '加载中',
    })
    wx.request({
        url: baseUrl + url, //仅为示例，并非真实的接口地址
        data: data,
        method: method,
        success (res) {
        //   console.log(res);
          wx.hideLoading(); // 隐藏加载
          resolve(res.data.message);
        },
        fail (err) {
          reject(err)
        }
      })
  })
}
export default api;

4.第四种

const request = (method,url,params) => {
  return new Promise((resolve,reject) => {
	let baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1"
	uni.showLoading({ // 添加加载动画
		title: '加载中'
	});
	uni.request({
	    url: baseUrl + url,  // url 形参就是传入的地址
	    data: params? params:'', // 传入的请求参数
		method: method, // 传入的请求方式
	    success: res => {
	      resolve(res.data);
		  uni.hideLoading();
	    },
		fail: err => {
		  reject(err);
		  uni.hideLoading();
		}
	});
  })
}

const api = {
  get: (url,params) => request("GET",url,params),
  post: (url,params) => request("POST",url,params)
}



export default api;

封装接口

// 所有的首页的请求 ，都放在这里维护
import api from '../index.js';

// 轮播图的请求

export const getSwiper = params =>  api.get('/home/swiperdata',params);


// 导航的请求

export const getNav = params =>  api.get('/home/catitems',params);


// => 函数，当形参只有一个的时候，（）可以省略


// 获取商品详情的接口

export const getDateil = params => api.get('/goods/detail',params);


// 获取楼层的数据
export const getFloor = params => api.get('/home/floordata',params);

5.第五种

import axios from 'axios';
import { Toast } from 'vant';
const api = axios.create({
    baseURL: 'https://api.it120.cc/small4', // 所有请求的公共地址部分
    timeout: 　3000 // 请求超时时间 这里的意思是当请求时间超过5秒还未取得结果时 提示用户请求超时
})


// 请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置
// interceptors axios的拦截器对象
api.interceptors.request.use(config => {
    // config 请求的所有信息
   // console.log(config);
//    console.log(3);
  Toast({
    icon: require('../assets/img/loding.gif'),
    duration: 0
  });
   return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行
}, err => {
   // 请求发生错误时的相关处理 抛出错误
  Promise.reject(err)
})


api.interceptors.response.use(res => {
    // 我们一般在这里处理，请求成功后的错误状态码 例如状态码是500，404，403
    // res 是所有相应的信息
    // console.log(2)
    Toast.clear();
   return Promise.resolve(res.data)
}, err => {
    // 服务器响应发生错误时的处理
    Promise.reject(err)
})

export default api

封装接口

git

// 所有的 首页二级页面的地址都放在这里

import api from '../api';

// getXXX 自定义的接口名字
export const getXXX = (params) => api.get(`/apigb/v1/component`, { params })

export const postXXX = (params) => api.post(`/apigb/v1/component/update-info`, params)

// 下面是详细的写法
// export const xxxx = (params) => api({
//         url: '', // 请求地址
//         method: 'post', // 请求方式
//         // data: params, // (一般post请求，我们习惯使用 data属性来传参)
//         params: params //(一般get请求，我们习惯使用params属性来传参）
//         // 注意：data，和 params 两个属性传参使用，并不是固定的，也可以调换使用。
// })

post

import api from '../api';
import qs from 'qs';
// 商品详情接口
// export const getDetail = (params) => api.post(`/shop/goods/detail`, params)


// 获取详情的接口
export const getDetail = (params) => api({
        url: '/shop/goods/detail', // 请求地址
        method: 'post', // 请求方式
        // data: params, // (一般post请求，我们习惯使用 data属性来传参)
        params: params //(一般get请求，我们习惯使用params属性来传参）
        // 注意：data，和 params 两个属性传参使用，并不是固定的，也可以调换使用。
})

// 获取短信验证码的接口
export const getSms = (params) => api({
        url: '/verification/sms/get', // 请求地址
        method: 'post', // 请求方式
        // data: params, // (一般post请求，我们习惯使用 data属性来传参)
        params: params //(一般get请求，我们习惯使用params属性来传参）
        // 注意：data，和 params 两个属性传参使用，并不是固定的，也可以调换使用。
})

6.第六种

const apiBase = "https://api.it120.cc/yh5026888"

export const Request = (params) =>{
  wx.showLoading({
    title: '加载中',
  })

  return new Promise(( resolve, reject) =>{
    wx.request({
      ...params,
      url:apiBase+params.url,
      header:{
        'content-type':'application/x-www-form-urlencoded '
      },
      success:(res)=>{
        resolve(res.data)
      },
      fail:(err)=>{
        reject(err)
      },
      complete: wx.hideLoading
    })
  })
}

封装接口

//接口配置

import {Request} from "./request"
// 首页大图
module.exports.Grid = () => Request({
url:"/banner/list?type=app",
methods:"get"
})

//轮播图
module.exports.Banner = (data) =>Request({
  url:"/banner/list",
  methods:"get",
  data
})