Axios的用法和作用,附带复习AJAX 和promise

小阿妍
409 阅读2分钟

Axios的get请求的学习

  • axios是基于promise用于浏览器和nodejs的HTTP客户端,可以用在浏览器和 node.js 中。 它本身有以下特征：
  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF 实际上，axios可以用在浏览器和 node.js 中是因为，它会自动判断当前环境是什么，如果是浏览器，就会基于XMLHttpRequests实现axios。如果是node.js环境，就会基于node内置核心模块http实现axios
  • 在HelloWorld中的template中添加内容
<template>
<div class="hello">
<h3> I am the axios,用来发棕请求，拦截响应。</h3>

</div>
</template>

步骤：

  • 1.安装:npm install axios
  • 2.引入加载：import axios from 'axios'
  • 3.将axios全局挂载到vue原型上：vue.prototype.$ttp = axios image.png
  • 4.如何发送请求
    • 发送请求的模板 image.png 得到一个API的地址，

image.png

  • 成功就是.then;
  • 失败就是.catch
  • 加入一个按钮
<button @click="getData">发送请求</button>

如果点击按钮，成功的话，后台console.log(res)就会出现API 的内容,如果console.log(res.data.data),就会出现更详细的的特定的内容

  • 5.把API中的标题显示在页面上
<template>
<ul>
<li v-for="item in items">
{{item.title}}
</li>
</ul>
</template>
-----------传统的function方式
methods:{
getData(){
var self = this;
this.$http.get('https://cnodejs.org/api/v1/topics')
.then(function(res){
self.items = res.data.data
console.log(res.data.data)
})
}}
-----------用ES6的方法
methods:{
getData(){
this.$http.get('https://cnodejs.org/api/v1/topics')
.thenres=>{
this.items = res.data.data;
console.log(res.data.data)
})
}}
  • 6.如果要加参数。例如显示多少页，每页多少内容，直接在
this.$http.get('https://cnodejs.org/api/v1/topics',{
params:{
page:1,
limit:10}})
-------------方法2
this.$http.get('https://cnodejs.org/api/v1/topics?page=1&limit=10')

这两种传递参数数据的方法一样

Axios的post的请求用法

image.png

image.png

   < template>
   <div class="hello">
   <h3>我是axiosAPP,用来发送请求，拦截响应</h3>
   <button @click=“getData”>发送请求</button>//添加一个按钮，绑定那个方法
   <ul>//把API中的title渲染到页面里面去，在data中定义一个items
   <li v-for= “item in items”>
   {{item.title}}
   </li>
   </ul>
   </div>
   </template>
   --------------
   <script>
   Vue.prototype.$http = axios;//全局挂载原型上
   import axios from 'axios'//引入axios
   import vue from 'vue'
   export default{
   name:'HelloWorld',
   data(){
   return{
  items:[]
   }
   },
   methods:{           //如何发送请求
   getData(){
  <!-- var self = this;
   this.$http.get('https://cnodejs.org/api/v1/topics')//获取这个API
   .then(function(res){                          //如果成功，打印response
   console.log(res.data.data)}
   )-->
   用es6的语法就简单：
   this.$http.get('https://cnodejs.org/api/v1/topics',{//若有参数就按照斜体字这样写
   *params:{
   page:1,
   limit:10
     })*
   .then(res=>{
   this.items = res.data.data;
     console.log(res.data.data)}
   })
   .catch(function(err){                     //如果失败，打印err
   console.log(err)})
   }
   }
   
   </script>

基本写法：const success = options.success const fail = options.fail 析构赋值：const{success，fail} = options//

AJAX的学习

  • 本质：用JS发请求和收响应。
  • 背景：AJAX是浏览器的功能
  • 浏览器可以发请求，例如输入一个百度的网站；
  • 收响应，就是向大家展示了一个百度的页面；
  • 服务器：浏览器发请求到服务器（server.js）上：
    • 复制nodejs-test里面的server.js里面的代码；
    • 创建一个目录AJAX1，用vscode打开，新建一个server.js，将复制的代码，粘贴进去；
    • 新建打开一个终端，输入node server.js
  • 安装node-dev，可以自动更新代码重启： 在终端里面输入 yarn global add node-dev node-dev server.js 8888

AJAX的创建,加载css

image.png image.png

Promise的学习

  • 异步模式，是指后一个任务不等前一个任务执行完就执行，每个任务有一个或多个回调函数。
  • Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
  • 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
  • Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
  • 使用Promise对象可以用同步操作的流程写法来表达异步操作，避免了层层嵌套的异步回调，代码也更加清晰易懂，方便维护，也可以捕捉异常。
function fn(num) {
  return new Promise(function(resolve, reject) {
    if (typeof num == 'number') {
      resolve();
    } else {
      reject();
    }
  })
  .then(function() {
    console.log('第1个then：参数是一个number值');
  })
  .then(null, function() {
    console.log('第2个then');
  })
}
fn('haha');
fn(1234);// 第1个then：参数是一个number值、第2个then
avatar
文章
阅读
粉丝