learnAxios-axios的基本使用及封装方式

最新推荐文章于 2022-10-05 22:58:12 发布

CoderVic

最新推荐文章于 2022-10-05 22:58:12 发布

阅读量168

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/CoderVic/article/details/123894377

版权

main.js

import Vue from 'vue'
import App from './App'


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

// 1.axios的基本使用
// axios({
// 	url:"http://123.207.32.32:8000/home/multidata",
// 	method:"get"
// }).then(res => {
// 	console.log(res)
// })


// axios({
// 	url:"http://123.207.32.32:8000/home/data?type=sell&page=3"
// }).then(res => {
// 	console.log(res)
// })

// axios ({
// 	url:"http://123.207.32.32:8000/home/data",
// 	params:{
// 		type:"sell",
// 		page:3
// 	}
// }).then(res => {
// 	console.log(res)
// })

// 2.axios发送并发请求
// axios.all([axios({
// 	url:"http://123.207.32.32:8000/home/multidata",
// }),axios({
// 	url:"http://123.207.32.32:8000/home/data",
// 	params:{
// 		type:"sell",
// 		page:1
// 	}
// })]).then(res => {
// 	console.log(res)
// })

// 3.使用全局的axios和对应的配置进行网络请求
// axios.defaults.baseURL="http://123.207.32.32:8000";
// axios.defaults.timeout=5000;

// axios.all([axios({
// 	url:"/home/multidata"
// }),axios({
// 	url:"/home/data",
// 	params:{
// 		type:"sell",
// 		page:2
// 	}
// })]).then(axios.spread((res1,res2)=>{
// 	console.log(res1)
// 	console.log(res2)
	
// }))



// 4.创建对应的axios的实例
// const instance1=axios.create({
// 	baseURL:"http://123.207.32.32:8000",
// 	timeout:5000
// })

// instance1({
// 	url:"/home/multidata"
// }).then(res => {
// 	console.log(res)
// })

// instance1({
// 	url:"/home/data",
// 	params:{
// 		type:"pop",
// 		page:2
// 	}
// }).then(res =>{
// 	console.log(res)
// })

// 5.封装request模块
import {request} from './network/request';

// request({
// 	url:'/home/multidata'
// },res=>{
// 	console.log(res)
// },err=>{
// 	console.log(err)
// })

// request({
// 	baseConfig:{
// 		url:'/home/multidata'
// 	},
// 	success:function(res){
// 			console.log(res)
// 	},
// 	failure:function(err){
// 			console.log(err)
// 	}
// })


request({
		url:'/home/multidata'
}).then(res=>{
	console.log(res)
}).catch(err=>{
	console.log(err)
})

axios的几种封装方式

import axios from 'axios'

// 第一种封装方式
export function request(config,success,failure){
	const instance = axios.create({
		baseURL:"http://123.207.32.32:8000",
		timeout:5000
	})
	instance(config).then(res => {
		success(res)
	}).catch(err => {
		failure(err)
	})
	
	
}

import {request} from './test';


request({
	url:'/home/multidata'
},res => {
	console.log(res)
},err => {
	console.log(err)
})


// 第二种封装方式
export function request(config){
	const instance = axios.create({
		baseURL:"http://123.207.32.32:8000",
		timeout:5000
	})
	instance(config.baseConfig).then(res => {
		config.success(res)
	}).catch(err => {
		config.failure(err)
	})
	
}


request({
	baseConfig:{url:"/home/multidata"}
},
success:function(res){
	console.log(res)
},
failure:function(err){
	console.log(err)
}
)

// 第三种封装方式
export function request(config){
	return new Promise((resolve,reject)=>{
		const instance = axios.create({
			baseURL:"http://123.207.32.32:8000",
			timeout:5000
		})
		instance(config).then(res=>{resolve(res)}).catch(err=>{reject(err)})
		
		
	})
}

request({
	url:"/home/multidata"
}).then(res=>{
	console.log(res)
}).catch(err=>{
	console.log(err)
})


// 第四种封装

export function request(config){
	const instance = axios.create({
		baseURL:"http://123.207.32.32:8000",
		timeout:5000
	})
	
	return instance(config)
}

request({
	url:"/home/multidata"
}).then(res=>{
	console.log(res)
}).catch(err=>{
	console.log(err)
})