axios学习笔记

axios学习笔记

为什么不用jq-ajax？

因为jQurey代码有1w+行，为重量级框架

vue中不需要jQurey

1、特点

//在浏览器中发送XMLHttpRequests请求
//在node.js中发送 http请求
//支持Promise API
//拦截请求和响应
//转换请求和响应数据等等

支持多种请求方式

axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, configl])
axios.patch(url[, data[, configll)

2、安装

npm install axios --save

3、使用

import axios from 'axios'

// axios基础使用
//axios会返回一个promise函数，所以直接调用promise的then和catch即可
axios({
  url:'http://123.207.32.32:8000/home/multidata',
  // 若不指定method，默认为get
  method:'get'
}).then((res)=>{
  console.log(res)
})

3.1、基础使用

// axios基础使用
//axios会返回一个promise函数，所以直接调用promise的then和catch即可
axios({
  url:'http://123.207.32.32:8000/home/multidata',
  // 若不指定method，默认为get
  method:'get'
}).then((res)=>{
  console.log(res)
})


axios({
  url:'http://123.207.32.32:8000/home/data',
  method:'get',
  // 针对get请求的参数进行拼接
  params:{
    type:'sell',
    page:1
  }
}).then((res)=>{
  console.log(res)
})

3.2 、处理并发请求

// axios发送并发请求（同时发送多个请求，请求都完成后执行then
axios.all([
  axios({
  url:'',
  method:'get'
}),axios({
  url:'',
  params:{
    name:'',
    age:''
  }
})]).then((res)=>{
  console.log(res)
  console.log(res[0])
  console.log(res[1])
})

// axios.sprad打开res数组（不常用
axios.all([
  axios({
  url:'',
  method:'get'
}),axios({
  url:'',
  params:{
    name:'',
    age:''
  }
  // axios.sprad可把结果拆开
})]).then(axios.spread((res1,res2)=>{
  console.log(res1),
  console.log(res2)
}))

3.3 、axios配置信息

3.3.1、单独配置

//3、axios配置 
axios({
  //baseURL 会拼接至url前
  baseURL:'http://123.207.32.32:8000',
  // timeout 超时时间、单位豪秒
  timeout:5000,
  url:'/home/multidata',
  // 若不指定method，默认为get
  method:'get'
}).then((res)=>{
  console.log(res)
})

3.3.2、全局配置

//  对axios进行全局配置
axios.defaults.baseURL='http://123.207.32.32:8000'
axios.defaults.timeout=5000

axios({
  url:'/home/multidata',
  method:'get'
}).then((res)=>{
  console.log(res)
})

3.3.3、 常用配置信息

axios({
  baseURL:'http://123.207.32.32:8000',
  url:'/home/multidata',
  method:'get',
  // 请求前的数据处理
  transformRequest:[function (data){}],
  // 请求后的数据处理
  transformResponse:[function(data){}],
  // 自定义的请求头
  headers:{'x-Requested-With':'XMLHttpRequest'},
  // url查询参数（get时用）
  params:{
    id:'12'
  },
  // 查询对象序列化函数
  paramsSerializer:function (params) {},
  // 请求体request body (post时用)
  data:{
    id:'aa'
  },
  // 超时设置
  timeout:1000,
  // 跨域是否携带Token
  withCredentials:false,
  // 自定义请求处理
  adapter:function (resolve,reject,config) {  },
  // 身份验证信息
  auth:{uname:'',pwd:'12'},
  // 响应的数据格式
  // json / blob /document /arraybuffer /text /stream
  responseType:'json'

}).then((res)=>{
  console.log(res)
})

3.4、创建axios实例 (推荐)

const myaxios1 = axios.create({
    baseURL:'www.2twl.com',
    timeout:6000
})
myaxios1({
    url:'/home',
    params:{
        id:'qwe112'
    }
})


const myaxios2 = axios.create({
    baseURL:'www.eeeee.com',
    timeout:6000
})
myaxios2({
    url:'/about',
    params:{
        id:'fsa'
    }
})

3.5、抽离封装axios

//避免直接在组件中引用第三方插件

//创建network文件夹
//创建需要的文件。如request.js

//统一导入axios
import axios from 'axios'
// 封装axios并导出
export function  myrequest1(config) { 
    //实例化axios
    const myaxios = axios.create({
        baseURL:'www.baidu.com',
        timeout:7000
    })
    //返回实例化的axios
    return myaxios(config)
 }
 export function  myrequest2(config) { 
    const youaxios = axios.create({
        baseURL:'www.baidu.com',
        timeout:7000,
    })
    return youaxios(config)
 }


//#########使用

// 导入封装的axios
import {myrequest1,myrequest2} from './network/request'

// 使用封装的axios
myrequest1({
    url:'/home',
    params:{
        id:'123'
    }
}).then((res)=>{
    console.log(res)
}).catch((err)=>{
    console.log(err)
})
//简化理解
myrequest2(config).then().catch()
//  |
//  V
youaxios(config).then().catch()

3.6、axios拦截器

const myaxios = axios.creat({
    baseURL:'www.baidu.com',
    timeout:9000
})
//##############	请求拦截
myaxios.interceptors.request.use((config)=>{
    console.log(config)
    // 放行config
    return config
},(err)=>{
    console.log(err)
})
//简化理解
myaxios.interceptors.request.use(function1,function2)

//请求拦截的作用
//1、config中的一些信息不符合服务器的要求
//2、每次网络请求的时候，希望页面中显示请求加载图标
//3、某些网络请求必须携带一些特殊的信息（比如登录需要添加token


//##############	响应拦截

myaxios.interceptors.response.use((res)=>{
	console.log(res)
    console.log(res.data)
    //放行res
    return res
},(err)=>{
	console.log(err)
})
//简化理解
myaxios.interceptors.response.use(function1,function2)

注：

最好不要直接在组件中引用第三方插件