axios & fetch

axios

• 用一句引用的话说 : “Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 Node.js 中。”

Installing

• Using npm install axios
• Using CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

• 引入axios之后 我们会得到一个axios的全局变量
• axios会将我们请求得来的数据进行一层封装
• 在vue中的methods选项中进行

静态数据请求 【 模拟数据 】

getStatic () {
    axios({
        url: './mock/data/movie.json',
        method: 'GET'
    }).then( res => console.log( res ))
      .catch( error => console.log( error ))
}

动态数据请求 【 真实接口 】

• get

get () {
    axios({
        url: './mock/data/movie.json',
        method: 'GET',
        params: {
            a:1,
            b:2
        }
    }).then( res => console.log( res ))
      .catch( error => console.log( error ))
}

• post

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//post请求很多的话,将该句请求头设置在new Vue ( {} )之前，也就是最上面
post () {
    //由于官网给出的api对于post有点不正确，都是在传递参数处会出现跨域
    const params = new URLSearchParams ()  
    //通过 new URLSearchParams来进行传参
    params.append( 'a',1 )
    params.append( 'b',2 )
    
    axios({
        url: 'http://localhost/post.php',
        method:'POST',
        data:params
    }).then( res => console.log( res ))
      .catch( err => console.log( err ))
}

fetch

1. fetch是原生js提供的，我们可以直接向全局变量一样使用
2. fetch也是Promise
3. fetch返回的结果是没有进行封装的，直接暴露
4. fetch数据格式化的方式有
   • json ()
   • text ()
   • blob () 格式化二进制 【 视频 图像 音频 】
5. post请求有坑

使用fetch其请求静态数据

getStatic () {
    fetch( './mock/data/data.json' )
        .then ( res => res.json() ) // 数据格式化
        .then ( data => console.log( data ) ) // 获取数据格式化的数据
        .catch ( err => console.log( err ) ) // 错误捕获
}

使用fetch请求动态数据 get

get () {
    fetch( 'http://localhost/get.php?a=1&b=2' )
        .then ( res => res.json() ) // 数据格式化
        .then ( data => console.log( data ) ) // 获取数据格式化的数据
        .catch ( err => console.log( err ) ) // 错误捕获
}

使用fetch请求动态数据 post

post () {
    fetch( 'http://localhost/post.php' {
        method: 'POST',
        headers: new Headers( { 
            'Content-Type': 'application/x-www-form-urlencoded'
        }),
        body: new URLSearchParams( [ ['a',1],['b',2] ] ).toString()
    }).then(res => res.text())
      .then(response => console.log('Success:', response))
      .catch(error => console.error('Error:', error))

}

模拟数据的实现方式

1. 为什么要写模拟假数据？

• 前后端分离,前后端同步开发,接口有时是没有的
• 模拟假数据的字段一定要和后端沟通好

2. mock.js 生成

• http://mockjs.com/
• 使用经验：
  • 我们使用的时候 , 根据案例 , 找和我们案例字段中结构相似的 , 然后复制语法 , 最后对应修改

//参考代码

const Mock = require('mockjs')

const fs = require('fs')

var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|4': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1,
        'name|1': ['胖薇', '肥薇', '减不了肥薇', '减肥失败薇']
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

fs.mkdirSync('data', (err) => {
    if (err) {
        console.log(err)
    } else {
        console.log('创建成功')
    }
})

fs.writeFile('./data/data.json', JSON.stringify(data, null, 4), (err) => {
    if (err) throw err
})

3. 拷贝线上相近的json

• 浏览器开发者工具 / netWork / XHR / copy response

4. easy mock

• https://easy-mock.com/login

总结注意点

axios vs fetch post请求都是有一些问题的

• 处理方式：
  • 1. 先设置请求头
  • 2. 通过 new URLSearchParams来进行传参

axios中的注意点

• 通过axios对象获取数据 --> axios({ }):返回Promise,所以可以用promise的方法

• axios中静态数据获取的方法和get方法获取动态数据几乎类似 , 唯一不同的是get获取动态数据时多了一个params选项

• axios中post获取动态数据就相对比较复杂了 :

  • 要先在new Vue( )代码之上写请求头：

  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  

  • 然后通过 new URLSearchParams 来进行传参

   const params = new URLSearchParams()
  
  // params.append(key,value)
  params.append('a', 1)
  params.append('b', 2)
  

• fetch( )

  • 获取静态数据和get获取动态数据时，方法后的括号中仅跟接口地址就ok了，
  • 但是post获取动态数据时，方法后的括号中除了接口的地址，还有第二个参数 options ,options中有 :

    • method: ‘POST’ // or ‘PUT’

    • headers: new Headers({
      ‘Content-Type’: ‘application/x-www-form-urlencoded’
      }) // 设置请求头

    • body: new URLSearchParams([[‘a’,1],[‘b’,2]]).toString() //通过 new URLSearchParams 来进行传参

  • fetch返回值也是一个Promise ，但它后面跟着两个then方法和一个catch
    • 第一个 then 用于 数据的格式化
    • 第二个 then 用于 获取数据格式化后的数据
    • 第三个 catch 错误捕获