Node.js中使用MongoDB数据库

axios

• 基于promise用于浏览器和node.js的http客户端
• 支持浏览器和node.js
• 支持promise
• 能拦截请求和响应
• 自动转换JSON数据
• 能转换请求和响应数据

axios基础用法

• get和 delete请求传递参数
  • 通过传统的url 以 ? 的形式传递参数
  • restful 形式传递参数
  • 通过params 形式传递参数
• post 和 put 请求传递参数
  • 通过选项传递参数
  • 通过 URLSearchParams 传递参数

axios基本用法

<script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    /*
      async/await处理多个异步任务
    */
    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {
      var info = await axios.get('async1');
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }

    queryData().then(function(data){
      console.log(data)
    })
  </script>

axios请求传参

<script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    /*
      axios请求参数传递
    */
   // axios get请求传参
    axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })
    axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })

   // axios delete 请求传参
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })

    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

    // axios put 请求传参
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

    

  </script>

axios 全局配置

#  配置公共的请求头 
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
axios.defaults.timeout = 2500;
#  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

<script type="text/javascript" src="js/axios.js"></script>
 <script type="text/javascript">
   /*
     axios 响应结果与全局配置
   */
   // axios.get('http://localhost:3000/axios-json').then(function(ret){
   //   console.log(ret.data.uname)
   // })

   // 配置请求的基准URL地址
   axios.defaults.baseURL = 'http://localhost:3000/';
   // 配置请求头信息
   axios.defaults.headers['mytoken'] = 'hello';
   axios.get('axios-json').then(function(ret){
     console.log(ret.data.uname)
   })


 </script>

axios 拦截器

• 请求拦截器
  • 请求拦截器的作用是在请求发送前进行一些操作
    • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
• 响应拦截器
  • 响应拦截器的作用是在接收到响应后进行一些操作
    • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

axios拦截器

<script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    /*
      axios拦截器
    */
    axios.interceptors.request.use(function(config) {
      console.log(config.url)
      config.headers.mytoken = 'nihao';
      return config;
    }, function(err){
      console.log(err)
    })

    axios.interceptors.response.use(function(res) {
      // console.log(res)
      var data = res.data;
      return data;
    }, function(err){
      console.log(err)
    })
    axios.get('http://localhost:3000/adata').then(function(data){
      console.log(data)
    })
  </script>

async 和 await

• async作为一个关键字放到函数前面
  • 任何一个async函数都会隐式返回一个promise
• await关键字只能在使用async定义的函数中使用
  • ​ await后面可以直接跟一个 Promise实例对象
  • ​ await函数不能单独使用
• async/await 让异步代码看起来、表现起来更像同步代码

<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
  /*
    async/await 处理异步操作：
    async函数返回一个Promise实例对象
    await后面可以直接跟一个 Promise实例对象
  */
  axios.defaults.baseURL = 'http:localhost:3000';
  // axios.get('adata').then(function(ret){
  //   console.log(ret.data)
  // })

  // async function queryData() {
  //   var ret = await axios.get('adata');
  //   // console.log(ret.data)
  //   return ret.data;
  // }

  async function queryData() {
    var ret = await new Promise(function(resolve, reject){
      setTimeout(function(){
        resolve('nihao')
      },1000);
    })
    // console.log(ret.data)
    return ret;
  }
  queryData().then(function(data){
    console.log(data)
  })
</script>

	# 1.  async 基础用法
   # 1.1 async作为一个关键字放到函数前面
async function queryData() {
     # 1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象
     var ret = await new Promise(function(resolve, reject){
       setTimeout(function(){
         resolve('nihao')
       },1000);
     })
     // console.log(ret.data)
     return ret;
   }
# 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程
   queryData().then(function(data){
     console.log(data)
   })

#2.  async    函数处理多个异步函数
   axios.defaults.baseURL = 'http://localhost:3000';

   async function queryData() {
     # 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
     
     var info = await axios.get('async1');
     #2.2  让异步代码看起来、表现起来更像同步代码
     var ret = await axios.get('async2?info=' + info.data);
     return ret.data;
   }

   queryData().then(function(data){
     console.log(data)
   })

async函数处理多个异步请求

<script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    /*
      async/await 处理异步操作：
      async函数返回一个Promise实例对象
      await后面可以直接跟一个 Promise实例对象
    */
    axios.defaults.baseURL = 'http:localhost:3000';
    // axios.get('adata').then(function(ret){
    //   console.log(ret.data)
    // })

    // async function queryData() {
    //   var ret = await axios.get('adata');
    //   // console.log(ret.data)
    //   return ret.data;
    // }

    async function queryData() {
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
    queryData().then(function(data){
      console.log(data)
    })
  </script>