Axios

接口：网站
官网

axios请求

默认类型get

axios({url:'http://www.tianditu.gov.cn/city/tdthome/province'})
  .then(res=>{
			console.log(res)
	 })

请求类型 method

1.方法一

axios({ url:'http://www.tianditu.gov.cn/city/tdthome/province'
		method:'post'      })
	.then(res=>{
			console.log(res)
      })

2.方法二

 axios.get('url').then(e=>{
			  //正确
		  }).catch(e=>{
			  //错误
		  })

参数拼接 params

axios({
			url:'http://www.tianditu.gov.cn/city/tdthome/province'
			//专门用来参数拼接
			params:{
				type:'pop',
				page:1
			}
		}).then(res=>{
			console.log(res)
      })

并发请求

axios.all([axios({
	url:'http://www.tianditu.gov.cn/city/tdthome/province'
}),axios({
	url:''
	params:{
		type:'pop',
		page:1
	}
})]).then(axios.spread((res1,res2)=>{
	console.log(res1)
	console.log(res2)
}))

axios 全局配置

axios.defaults.baseURL = ‘123.207.32.30:8080’
axios.defaults.headers.post[‘Content-Type’] = ‘applicaton/x-www-form-urlencoded’
axios.defaults.timeout = 5000

axios.defaults.baseURL = 'http://www.tianditu.gov.cn/city/tdthome'
axios.defaults.timeout = 5000 
//默认get类型传参
axios({
			url:'/province'
			//专门用来参数拼接
			params:{
				type:'pop',
				page:1
			}
		}).then(res=>{
			console.log(res)
      })

get传参

axios.get('/province',{
            params:{
                id:123
            }
        }).then(res=>{
           console.log(res)
        })

等同于

 axios.get('/province?id=123')
          .then(res=>{
              console.log(res)
          })

实例与模块化封装

创建实例

    const instancel = axios.create({
        baseURL:'http://127.0.0.1:8080',
        temeout:5000
    })

    instancel({
        url:'/home/multi'
    }).then(res=>{
        console.log(res)
    })

    instancel({
        url:'/home/data',
        params:{
            type:'pop',
            page:1
        }
    }).then(res=>{
        console.log(res)
    })

封装1 回调函数

//request.js

import axios from 'axios'

//1.创建axios的实例
export function request(config，success,failure){
    
    const instance = axios.create({
         baseURL:'http://127.0.0.1:8080',
         temeout:5000
    })
//发送真正的网络请求   
    instance(config)
    .then(res=>{
        //console.log(res)
        success(res)
    })
    .catch(err => {
        //console.log(err)
        failure(err)
    })
}

//main.js
//封装request模块
import {request} from './request.js'

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

封装2 回调函数

//request.js

import axios from 'axios'

//1.创建axios的实例
export function request(config){
    
    const instance = axios.create({
         baseURL:'http://127.0.0.1:8080',
         temeout:5000
    })
//发送真正的网络请求   
    instance(config.baseConfig)
    .then(res=>{
        //console.log(res)
        config.success(res)
    })
    .catch(err => {
        //console.log(err)
        config.failure(err)
    })
}

//main.js
//封装request模块
import {request} from './request.js'

request({
     baseConfig:{

     },
     success:function(res){
         
     },
     failure:function(err){
         
     }
})

封装3 Promise

//request.js
import axios from 'axios'

  
export function request(config){
    
  return new Promise((resolve,reject)=>{
      //1.创建axios的实例
       const instance = axios.create({
         baseURL:'http://127.0.0.1:8080',
         temeout:5000
    })
      //发送真正的网络请求   
    instance(config)
    .then(res=>{
        resolve(res)
    })
    .catch(err => {
        reject(err)
    })
  })  
  
}

//main.js
//封装request模块
import {request} from './request.js'

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

封装4 axios自带Promise

//request.js
import axios from 'axios'

export function request(config){
    
     //1.创建axios的实例
       const instance = axios.create({
         baseURL:'http://127.0.0.1:8080',
         temeout:5000
        })
     //发送真正的请求
     retern instance（config）
}

//main.js
//封装request模块
import {request} from './request.js'

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

回调函数原理

//fn test(a,b)  相当于request.js
function test(aaa,bbb){
    aaa('hellow world')
    bbb('err message')
}

//test(a,b)   相当于main.js
test(function(res){
   console.log(res)
},function(err){
   console.log(err)
})

axios拦截器的使用