axios和fetch

axios

• 第三方封装库
• https://www.npmjs.com/package/axios
• 在html中加上 <script src=“https://unpkg.com/axios/dist/axios.min.js”></script>
• 特点
  1.它在浏览器中创建的是浏览器对象
  2.它底层是用Node.js中的http模块实现的
  3 支持Promise
  4.可以拦截请求和响应
  - 功能： loading加载效果、登录拦截
  5.转换请求和响应数据
  6.自动转换为JSON数据
  7.客户端支持防止XSRF
  8.axios会自动封装数据
• 使用
  • Mock模拟数据的请求
    • 要求: 必须和后端沟通好返回数据的字段
    • mock.js生成(http://mockjs.com/examples.html) --要用mock.js要安装（npm init - y cnpm i mockjs -S）
      • mock 目录
    • jsonplaceholder
      • 线上的 http://jsonplaceholder.typicode.com/
    • 拷贝线上相似数据
      • copy response
  • 后端接口的请求
    • https://www.showdoc.cc/ 这是一个后端渲染模板
    • post请求必须先设置请求头（axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;）

Mock模拟数据的请求

/*getMockData () {
  // axios.get( url, 配置项 ).then().catch()
  axios.get('./mock/data/data.json')
    .then( res => {
      console.log( res )
    })
    .catch( err => console.log( err ))
}*/
getMock() {
    axios({
        url: './mock/data/data.json',
        method: 'GET',
    }).then((res) => {
        console.log(res);
    }).catch(err => console.log(err))
}

获取jsonplaceholder数据

/*getJsonPlaceHolder() {
  axios.get('http://jsonplaceholder.typicode.com/albums')
    .then(res => {
      console.log(res)
    })
    .catch(err => console.log(err))
}*/
getJsonplaceholder() {
    axios({
            url: 'http://jsonplaceholder.typicode.com/users',
            method: 'GET'
        }).then(res => console.log(res))
        .catch(err => console.log(err));
}

后端接口的请求

1.get请求 （请求携带参数放在params中）

// const DEV_BACK_URL / BASE_URL  = 后端接口地址
const DEV_BACK_URL = 'http://localhost:5000'
//const BACK_URL = 'http://localhost:5000'
//const BASIC_URL = 'http://localhost'
//axios.defaults.baseURL = BACK_URL;//后端接口地址(有时会这么写)
shop() {
  axios.get(`${ DEV_BACK_URL }/shop`, {
    params: { //get请求携带参数
      a: 1,
      b: 2
    }
  }).then(res => {
    console.log(res)
  }).catch(error => console.log(error))
}

2.post请求

register() {
    const p = new URLSearchParams();
    p.append('username', 'zhangsan');
    p.append('pwd', '123');
    axios({
        url: `${BASE_URL}/register`,
        method: 'POST',
        data: p
    }).then((res) => {
        console.log(res)
    }).catch(err => console.log(err));
}

== axios和ajax区别，为什么axios更好？==

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
axios是ajax ajax不止axios。
优点:支持Promise API,自动转换为JSON数据,提供了并发请求API接口

fetch

1. 原生js提供了两种数据请求方式

   • ajax
   • fetch

2. ajax vs fetch

   • ajax需要封装的， fetch不需要
   • ajax不太符合MV* 开发方式，fetch可以认为是 js 为了 MV* 方式做的量身打造
   • fetch 也是 Promise

3. 封装axios / fetch (一般文件名会取这几个名字)

   • ajax
   • xhr
   • request
   • http

语法：fetch( url, config ).then().then().catch()

第一个then是为数据格式化，可以格式化的数据类型有： json text blob[ 二进制 ]
第二个then才是得到的数据

1.get请求 (get请求参数是连接在url上)

const BASE_URL = 'http://localhost'
  new Vue({
    el: '#app',
    data: {
      movies: null,
      num: 0,
      sum: 0
    },
    methods: {
      get() {
        fetch(`${ BASE_URL }/get.php?a=1&b=2`) //get请求参数是连接在url上
          .then(data => data.text())
          .then(res => {
            this.num = res //得到数据res，并更新了数据
          })
          .catch(err => console.log(err))
      }
 ...
  }
...

2.post请求

post() {
        /* 
          1. post请求参数如何携带
        */
        fetch(`${ BASE_URL }/post.php`, {
            method: 'POST',
            // body: JSON.stringify({
            //   a: 1,
            //   b: 2
            // })
            headers: new Headers({
              'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
            }),
            body: new URLSearchParams([
              ["a", 1],
              ["b", 2]
            ]).toString()
          }).then(data => data.text())
          .then(res => {
            this.sum = res
          })
          .catch(err => console.log(err))
      }

注意点：

1. body: JSON.stringify({ a: 1, b: 2 })
   如果只写了这句，没有写 headers 和 body
   后端能拿到了数据 但格式不对，需要和后端人员沟通一下
2. body: new URLSearchParams([ ["a", 1], ["b", 2] ]).toString()
   把上一句注释，换上这句，拿到的 参数:参数值&参数:参数值
3. headers: new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交 })
   这句和上一句组合起来一起就是 标准模式

== ajax、axois、fetch的区别==

ajax:
     1. 本身是针对MVC的编程,不符合现在前端MVVM
     2. 基于原生的XHR开发，XHR本身的架构不清晰
     3. JQuery ajax 对进行了原生XHR的封装，但JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理
     4. 不符合关注分离（Separation of Concerns）的原则
     5. 配置和调用方式非常混乱，而且基于事件的异步模型不友好
axois:
	 1. axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端(它底层是用Node.js中的http模块实现的)，是第三方封装库
	  本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范
	 2. 从浏览器中创建 XMLHttpRequest 浏览器对象
	 3. 支持 Promise API
	 4. 可以拦截请求和响应（功能： loading加载效果、登录拦截）
	 5. 转换请求和响应数据
	 6. 自动转换为JSON数据
	 7. 客户端支持防止XSRF 
	 8. axios会自动封装数据
	 9. 取消请求 
fetch:
	 1. fetch可以认为是js为了MV*方式做的量身打造
	 2. 符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
	 3. 语法简洁，更加语义化
	 4. 基于标准 Promise 实现，支持 async/await
	 5. 脱离了XHR，是ES规范里新的实现方式