axios学习axios模块封装思想笔记

axios初步学习笔记

（{}）：问题：方法不知道是什么意思

回答：（）指往里传入，{}可以传入对象，其他同理

问题： 是什么意思res => { }

then（res => {
console.log(res);
}）

问题：params作用

params：专门对数据的参数进行拼接
params:{
type:‘pop’,
page:1
}
样例

 //1.url直接写全称
  // url:'http://123.207.32.32:8000/home/data?type=pop&page=3'
  //2.第二种方式
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'pop',
    page:1
  }

跟get配合使用，
requst配合data：{}使用

axios.all的写法

axios.all([axios({
  url:'http://123.207.32.32:8000/home/data?type=pop&page=3'
}),axios({
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'pop',
    page:1
  }
})])
.then(results => {
console.log(results);
})

axios的全局配置

//网址的开头全局单独拿出来
axios.defaults.url = 'http://123.207.32.32:8000'
//网址的延迟时间
axios.defaults.timeout = 5000

axios.all([axios({
  url:'/home/data?type=pop&page=3'
}),axios({
  url:'/home/data',
  params:{
    type:'pop',
    page:1
  }
})])
.then(results => {
console.log(results);
})

axios的实例

单独使用配置，适用于大项目分布式服务器

const instance1= axios.create({
  baseURL:'http://123.207.32.32:8000',
  timeout:5000
}
)
instance1({
  url:'/home/data',
    params:{
      type:'pop',
      page:1
    }
}).then(res => {
  console.log(res);
})

问题：什么是created

组件创建生命周期，可在内插入方法
created（）{
console.log(------)
}

axios模块封装思想

新建一个request.js封装模块
导入axios
创建实例，传入参数/函数
外部调用

import axios from 'axios'
export function request(config,success,failure){
//1.创建实例
const instance1= axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:5000
  })
  instance1(config)
  .then(res => {
    console.log(res);
    success(res)
  })
  .catch(err => {
    console.log(err);
    failure(err)
  })

main.js调用，模块内方法

import {request} from "./network/request"

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

)

二，使用Promise方法
export function request(config){
return new Promise((resolve,reject) =>{
//1.创建实例
const instance= axios.create({
baseURL:‘http://123.207.32.32:8000’,
timeout:5000
})
instance(config)
.then(res => {
// console.log(res);
resolve(res)
})
.catch(err => {
// console.log(err);
reject(err)
})
})
}
main方法
request({
url:’/home/multidata’
}).then(res =>{
console.log(res);

}).catch(err =>{
console.log(err);

})

终极大法
return interceptor(config)
就是这么简单，interceptor 内置promise