axios接口封装（Promise） uniapp接口封装

uniapp项目、vue脚手架项目都可使用

如果需要封装uniapp原生的可查看我的另一篇文章：uniapp接口封装https://blog.csdn.net/weixin_57228868/article/details/121909851?spm=1001.2014.3001.5502

一、安装

import install axios --save

二、在根目录下创建文件夹utils，在utils中新建request.js

request.js：

import axios from 'axios'
// 前后端 规定数据格式
// axios.defaults.headers['Content-Type'] = 'multipart/form-data'
// 创建axios实例
const service = axios.create({
	baseURL: 'http://xxxxxx',//域名
	// 超时时间
	timeout: 10000
})

service.interceptors.request.use(config => {
    // console.log("axios请求拦截器")
	config.headers['token'] = token   //根据自己所需使用
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 0) {
      return Promise.reject(res)
    } else {
      return res
    }
  },
  error => {
    console.log('err：' + error)
    return Promise.reject(error)
  }
)

// 自定义适配器来解决uniapp 适配axios请求，避免报adapter is not a function错误
// app、小程序项目报这个错误写上下面这一段即可
axios.defaults.adapter = config => {
	return new Promise((resolve, reject) => {
		let settle = require('axios/lib/core/settle');
		let buildURL = require('axios/lib/helpers/buildURL');
		uni.request({
			method: config.method.toUpperCase(),
			url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
			header: config.headers,
			data: config.data,
			dataType: config.dataType,
			responseType: config.responseType,
			sslVerify: config.sslVerify,
			complete: function complete(response) {
				response = {
					data: response.data,
					status: response.statusCode,
					errMsg: response.errMsg,
					header: response.header,
					config: config
				};
				settle(resolve, reject, response);
			}
		})
	})
}

export default service

三、在根目录下新建文件夹api， 在api中新建user.js

user.js：

import request from '@/utils/request'

export function login(params,data) {
  return request({
    url: '/api/index/index',
    method: 'post',
    params: params,
    data: data
  })
}

在页面 hellowWord.vue 中使用接口：

import { login } from '@/api/user.js'


login().then(res => {
	console.log(1111,res)
}).catch(err => {
	console.log(2222,err)
})