promise链式调用与axios封装网络请求

1、为了避免发生回调地狱

即一层一层嵌套执行异步的网络请求,而使代码复杂化，不易于阅读，用promise调用，使代码清晰

1、promise的两种形式

  new Promise((resolve, reject) => {
    setTimeout(() => {
      // 成功的时候调用resolve,跳转到then请求把resolve里面的参数传递过去
      // resolve('Hello World')

      // 失败的时候调用reject
      reject('error message')
    }, 1000)
  }).then((data) => {
    // 1.100行的处理代码
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
  }).catch((err) => {
    console.log(err);
  })

  new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve('Hello Vuejs')
      reject('error message')
    }, 1000)
  }).
  //then里面有两个函数一个是then处理resolve数据，一个是catch处理reject数据
  then(data => {
    console.log(data);
  }, err => {
    console.log(err);
  })

2、promise的链式调用

2.1 、链式调用一

与回调地狱相替换的就是链式调用

new Promise((resolve, reject) => {

    // 第一次网络请求的代码
    setTimeout(() => {
      resolve()
    }, 1000)

  }).then(() => {
    // 第一次拿到结果的处理代码
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
	//返回一个promise对象因此可以在后面继续then
    return new Promise((resolve, reject) => {

      // 第二次网络请求的代码
      setTimeout(() => {
        resolve()
      }, 1000)
    })
  }).then(() => {

    // 第二次处理的代码
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');

    return new Promise((resolve, reject) => {

      // 第三次网络请求的代码
      setTimeout(() => {
        resolve()
      })
    })
  }).then(() => {

    // 第三处理的代码
    console.log('Hello Python');
    console.log('Hello Python');
    console.log('Hello Python');
    console.log('Hello Python');
    console.log('Hello Python');
  })

2.2链式调用二

在需要对返回的data数据进行简单的处理的时候可以这样进行链式调用

  new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('aaa')
  }, 1000)
}).then(res => {
  // 1.自己处理10行代码
  console.log(res, '第一层的10行处理代码');

  // 2.对结果进行第一次处理
  return new Promise((resolve, reject) => {
    // resolve(res + '111')
    reject('err')
  })
}).then(res => {
  console.log(res, '第二层的10行处理代码');

  return new Promise(resolve => {
    resolve(res + '222')
  })
}).then(res => {
  console.log(res, '第三层的10行处理代码');
}).catch(err => {
  console.log(err);
})

new Promise(resolve => resolve(结果))简写

3、promise当同时需要两个网络请求成功时

  Promise.all([
     // new Promise((resolve, reject) => {
     //   $.ajax({
     //     url: 'url1',
     //     success: function (data) {
     //       resolve(data)
     //     }
     //   })
     // }),
     // new Promise((resolve, reject) => {
     //   $.ajax({
     //     url: 'url2',
     //     success: function (data) {
     //       resolve(data)
     //     }
     //   })
     // })

   new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve({name: 'why', age: 18})
     }, 2000)
   }),
   new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve({name: 'kobe', age: 19})
     }, 1000)
   })
 ]).then(results => {
   console.log(results);
 })

4、axios封装网络请求

axios就是一个promise对象，并且在内部调用了resolve和reject因此

import axios from 'axios'

export function request(config) {
 // 1.创建axios的实例
 const instance = axios.create({
   baseURL: 'http://123.207.32.32:8000',
   timeout: 5000
 })

 // 2.axios的拦截器
 // 2.1.请求拦截的作用
 instance.interceptors.request.use(config => {
   // console.log(config);
   // 1.比如config中的一些信息不符合服务器的要求

   // 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标

   // 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息
   //拦截成功后必须返回
   return config
 }, err => {
   // console.log(err);
 })

 // 2.2.响应拦截
 instance.interceptors.response.use(res => {
   // console.log(res);
   //返回拦截到的数据
   return res.data
 }, err => {
   console.log(err);
 })

 // 3.发送真正的网络请求
 return instance(config)
}

第二种封装方法，返回一个promise,然后用then，catch处理数据

 export function request(config) {
   return new Promise((resolve, reject) => {
     // 1.创建axios的实例
     const instance = axios.create({
       baseURL: 'http://123.207.32.32:8000',
       timeout: 5000
     })

     // 发送真正的网络请求
    instance(config)
       .then(res => {
         resolve(res)
       })
       .catch(err => {
         reject(err)
       })
   })
 }

第三种传入一个带baseconfig，处理success函数，处理failure函数

 export function request(config) {
   // 1.创建axios的实例
   const instance = axios.create({
     baseURL: 'http://123.207.32.32:8000',
     timeout: 5000
   })

   // 发送真正的网络请求
   instance(config.baseConfig)
     .then(res => {
       // console.log(res);
       config.success(res);
     })
     .catch(err => {
       // console.log(err);
       config.failure(err)
     })
 }

第四种封装方法传入三个参数

 export function request(config, success, failure) {
   // 1.创建axios的实例
  const instance = axios.create({
     baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 发送真正的网络请求
  instance(config)
     .then(res => {
      // console.log(res);
       success(res);
     })
    .catch(err => {
      // console.log(err);
       failure(err)
    })
 }