axios请求封装

最新推荐文章于 2024-01-01 07:31:44 发布

yanya97

最新推荐文章于 2024-01-01 07:31:44 发布

阅读量122

点赞数 1

文章标签： vue ajax

本文链接：https://blog.csdn.net/yanya97/article/details/105954700

版权

1、config.js

配置axios的基本参数

export default {  
method: 'get', 
 baseURL: 'http://', // 基地址 
 imgBaseUrl: 'http://', // 图片基地址  
 headers: {    
 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'    
 // 'Content-Type': 'text/plain;charset=UTF-8'    
 // 'Content-Type': 'application/json;charset=utf-8'    
 // 这种是不支持的    
 //  浏览器跨域并不支持application/json的Content-Type，即使后台设置了允许的跨域头部参数，依然会报错  
 },  
 timeout: 10000,  
 // 携带凭证  
 withCredentials: false,  
 // 返回数据类型  
 responseType: 'json'}

2、api.js

import axios from 'axios'
import config from './config.js'
import qs from 'qs'

axios.interceptors.request.use(config => {  
	if (config.method === 'post') {    
		config.data = qs.stringify(config.data)  
	}  
	return config
}, error => {  
	Promise.reject(error)
})

class API {  
// axios POST  
post (url, data = {}) {    
	if (url.indexOf('messageSave') !== -1) {
	      config.responseType = 'json'	
	} else {
	      config.responseType = ''
	}    
	config.data = qs.stringify(data)    
	return this._handle(axios.post(url, data, config))  
	}
// axios GET  
get (url) {
	return this._handle(axios.get(url, config))  
}
// promise handle  
_handle (func) {
    return func.then(res => {      
    	// console.log('_____后端返回结果_______', res)      
    	if (!res.data) {
            console.log('返回值为null', res)        
            return Promise.reject(new Error('无返回值'))      
    	} else if (res.data.stateType === 1) { // 1 失败
        	return Promise.reject(new Error(res.data.stateMsg))      
        } else if (res.data.stateType === 0) { // 0 成功 
               return Promise.resolve(res.data.stateValue)      
	} else { // 其他状态
		return Promise.reject(new Error(res.data.stateMsg))      
	}    	
    }).catch(erro => {      
 	// console.log('_____后端错误_______', erro)      
 	// 除去Error：      
	this.popUp(erro.toString().split(':')[1])      
	return Promise.reject(new Error(erro))    
	})  
    }
 
export default API

3、使用

import API from '../js/api.js'
const api = new API()


api.post('xxxxxxxxx/xxxxxxxxx', {xx1: that.xx1}).then(res => {
     console.log('获取成功==res=', res)      
     }).catch(err => {     
           console.log('获取失败==error=', err)    
     })