文章目录

• 必背-6.axios和fetch用法
• • axios
  • Fetch
  • 同源与跨域

必背-6.axios和fetch用法

axios

1.axios是什么？

• axios官方网址：http://www.axios-js.com/zh-cn/docs/
• axios是什么：axios是基于Promise封装的ajax库，基于这个类库发送ajax请求，默认就是基于promise管理的，核心是XMLHttpRequest
• ==axios基于请求方式分为了:get/head/delete/opations/post/put/patch==方法。

2.axios中GET系列的使用方法？

• 首先需要导入axios对应插件：

  • npm i axios
    <script src="node_modules/axios/dist/axios.min.js"></script>
    

• get方法的创建:axios.get([url],[config])；对应的delete/head/opations方法都是用下面规范

  • [url]：放我们请求资源的对应接口路径，不带参数

    • "http://127.0.0.1:8080/user/list"
      

  • [config]：用来配置请求信息，是一个对象类型，每个属性按照键值对的形式配置,常用8个。

    • 我们配置的这些属性实际上是在给这次请求的xhr实例设置私有属性，不要以为都是在给请求头设字段。
    • baseUrl:[string]:配置请求地址的前缀
    • params:[string/object]:属性值可以是字符串可以是对象
      • 对象:会将里面属性名和属性值拼接为键值对，问号拼接到URL后面
      • 字符串：无论字符串内写的是xxx，那直接在URL后面拼接为**“0=xxx”**
    • headers:[object]:属性值是对象类型，作用同ajax中的xhr.setRequestHeader()
      • headers:{"Content-Type":application/json}:但是在get跟Post中，Content-Type属性一般不需要咱们手动改
      • headers:{"Name":"sjh"}:可以通过headers给请头添加我们想传的数据
    • timeout:[number]:请求超时时间，数字类型但为是ms
    • withCredentials:[boolean]:默认为false，true：表示允许跨域携带资源凭证，false：表示不允许
    • responseType:[string]:把服务器返回的结果转为对应的数据格式，默认是json(服务器返回的结果，我们都把它转为json对象)，还有其他类型：‘arraybuffer/blob/document/json/text/strem’;
    • onUploadProgress:[function]:监听文件上传进度
    • validateStatus:[function]:里面是一个函数，函数中的return可以配置status决定状态值在什么范围才算请求成功，默认2xx为请求成功

3.axios中POST系列的使用方法？

• 首先需要导入axios对应插件：

  • npm i axios
    <script src="node_modules/axios/dist/axios.min.js"></script>
    

• axios中post的创建方式：axios.post([url],[data],[config]);对应的put/patch方法

  • url：字符串类型，请求的目标路径
  • [data]：可以是字符串类型，可以对象类型，post中请求体的信息，如同xhr.send(),中传的数据，但一般不会传字符串。
  • [config]：**对象类型，**配置请求的配置项

• post常配置的配置项：

  • 与get相同，但是没有params，因为post不同请求头传参
  • transformRequest:function([data],[headers]){return xxx}:POST请求专用的方法，对请求主体进行格式处理
    • [data]获取的是axios.post()方法中的第二个参数的值，data必须是标准普通对象，我们在内部就可以给他做格式的处理,return什么，[data]请求体就会变成什么
    • 比如我们的[data]传的是JSON对象格式的，但后台想要urlencoded格式的，那我们就可以用transformRequest转换一下。

• axios中POST请求的请求主体：

  • data就是请求体信息：发送之前，会在内部默认处理称为JSON字符串，再传给服务器
    • 如果服务器想要的不是JSON字符串，可以将[data]值设置为服务器想要的字符串。
    • 如果服务器想要的是urlencoded字符串，我们有两种方式做处理：
      • 方式一：【引入Qs库】，基于Qs.stringify/parse做处理：axios.post([url],Qs.stringify(data),[config]);
        • Qs.stringify(data):将对象转为urlencoded字符串
        • Qs.parse(data):将urlencoded字符串转为对象
      • 方式二：使用transformRequest:function ([data],[heders]){return xxx} 的方式，自行改成想要的格式。

4.axios内部做的优化？

• axios内部做了一个非常有用的事情：根据我们传递给服务器的内容格式，自动帮我们设置请求头中的 Content-Type ,让其和传递的格式相匹配「MIME类型」
  • urlencoded格式字符串 ： Content-Type:‘application/x-www-form-urlencoded’
  • json格式字符串 ：Content-Type:‘application/json’
  • FormData格式对象： Content-Type:‘multipart/form-data’

5.对象分为几大类？

• 对象类型「引用数据类型」
  • 标准普通对象 object
  • 标准特殊对象 Array、RegExp、Date、Math、Error……
  • 非标准特殊对象 Number、String、Boolean……
  • 可调用/执行对象「函数」function

6.axios做get请求时存在的三种错误情况？

• 有响应体：返回的错误对象中有状态码：response->status，没有code
• 无响应体：
  • timeout：请求超时或被中断，没有状态码，有code属性：code:"ECONNABORTED" response:undefined
  • navigator.onLine=false(断网)时：没有状态码，也没有code和response，只能用navigator.onLine=false判断。

7.axios的get和post请求另一种写法？

axios({
        method: 'get',
        url:'http://127.0.0.1:9999/user/list',
        params:{id:1},//重点，get方法中用params
        headers:{}
    }).then(res=>{
        console.log(res);
})

axios({
        method: 'post',
        url:'http://127.0.0.1:9999/user/list',
        data:{id:1},//重点，post方法中才能有data
        headers:{}
    }).then(res=>{
        console.log(res);
})

8.axios二次封装？

• 提取公共配置：axios的二次封装就是将所有请求的公共部分提取到一个默认的js文件中，所有的请求都会遵循这个默认配置文件。

  • 默认配置：axios.defaults.xxx;->xxx:是能够配置的配置项，如timeout

    • axios.defaults.baseURL = 'http://127.0.0.1:9999';//设置公共 前缀路径
      
      axios.defaults.transformRequest = data => {//设置公共 转换请求体格式
          if (isPlainObject(data)) return Qs.stringify(data);
          return data;
      };
      axios.defaults.timeout = 60000;//设置公共 请求超时时间
      

  • 请求/响应拦截器:axios.interceptors.request/response

• 单独配置：单独写的请求配置，优先级高于公共配置

9.axios的请求、响应拦截器怎么使用？

• 基于拦截器进行公共部分提取

• 请求拦截器：发生在 “配置项准备完毕” 和 “发送请求” 之间

• 响应拦截器：发生在 “服务器返回结果” 和 “业务代码自己处理 .then” 之间

• //请求拦截
  axios.interceptors.request.use(config => {
  					// config对象包含的就是准备好的配置项，最后返回啥配置，就按照这些配置发请求
    return config;
  });
  

• //响应拦截：如果成功就将结果返回给用户，如果失败，进行处理再返回
  axios.interceptors.response.use(response => {
      // 请求成功:把响应主体信息返回给业务层去使用
      return response.data;
  }, reason => {
      // 请求失败:根据不同的失败原因做不同的提示
      if (reason && reason.response) {
          // @1 有返回结果，只不过状态码不对
          let {status} = reason.response;
          switch (+status) {//switch是做===比较
              case 403:
                  alert('服务器不爱搭理你~~');
                  break;
              case 404:
                  alert('你傻啊，地址都错了~~');
                  break;
              case 500:
                  alert('服务器开小差了~~');
                  break;
          }
      } else {
          // @2 请求超时或者中断 
          if (reason && reason.code === "ECONNABORTED") {
              alert('请求超时或者被中断了~~');
          }
          // @3 断网
          if (!navigator.onLine) {
              alert('当前网络出问题了~~');
          }
      }
      // 统一失败提示处理完，到业务代码处，我们还是要失败的状态，这样才能继续做一些自己单独想做的失败处理
      return Promise.reject(reason);
  });
  
  

Fetch

1.Fetch的使用？

• ES6新增的一种API Fetch,是浏览器原生自带的，核心不是XMLHttpRequest，是基于全新的通信机制实现的[本身是基于promise管理的]

• 用法：

  •     fetch('http://localhost:9999/job/list',{
            method:'GET',
            headers:{},//请求头信息
            //必须是字符串
            // body:JSON.stringify({id:0})//请求体中的参数,GET/HEAD/OPtions/DELETE方法没有请求体，不能有body
        }).then(function(response){
            console.log(response);//获取的是一个响应信息的对象，看不到真正的响应体
            return response.json(); //想要获取响应体的信息，需要调用对应格式的response.xxx()方法
    
        }).then(function(value){
            console.log(value);
        })
    

• 注意点：

  • GET/DELETE/OPTIONS/HEAD方法中不能存在body。
  • fetch得到的结果是一个Promise对象，可以调用then方法PromiseResult是响应的信息，但找不到响应体信息。
  • 想要获取响应体信息需要调用result对应数据格式的方法，比如想获取json格式的响应数据：result.json()/result.text()/result.formdata()/…
  • result.json等格式获取方法只能使用一次，且只能有一种

2.axios和Fetch的区别？

• 相同点：他俩都是发送请求的
• 实现原理不同：axios是基于promise封装的ajax类库，fetch是ES6中浏览器原生的API
• 传参字段不同：
  • axios的get请求参数放到params中，post请求体信息放到data里
  • fetch的get请求参数直接跟在url后面，post请求体信息放在body里
• 环境支持程度：node环境中不支持fetch，需要引入node-fetch文件才能支持
• 功能差异：axios中的配置和拦截器等功能，fetch中都没有。

同源与跨域

1.如何区分是同源还是跨域？

• 浏览器默认存在的浏览器同源策略：不允许不同源获取数据。
• ==同源：==请求的url路径与请求端协议类型、域名、端口号，完全相同，则表示同源
• ==跨域：==只要协议类型、域名、端口号其中一个不一样就称为跨域

2.跨域请求在项目中的场景和意义，以及解决跨域的方案？

• 跨域请求不被允许的原因：【跨域请求就是做通行证】服务器不允许发送请求的地址访问**（origin 源地址）**，Access-Control-Allow-Origin

• 情景一：开发时候是跨域的，项目在部署上线后是同源的【现在很少了】

  • 解决方案：开发时的跨域：修改服务器本地的hosts文件即可，【修改服务器本地DNS缓存】【很少用】

• 情景二：开发和部署的时候都是跨域的：比如将一个项目文件按类型分服务器部署

  • 方案一：JSONP跨域请求方案【缺点：只支持Get请求】
  • 方案二：CROS跨域资源共享【由服务器去配置】
  • 方案三：PROXY跨域资源代理【最常用，需要前端去配置的】
  • 方案四：postMessage+iframe【已经淘汰了】

3.CROS资源跨域共享如何设置跨域请求？

• 设置允许源 Access-Control-Allow-Origin：

  • 	res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
    	res.header("Access-Control-Allow-Credentials", true);
    

• *：允许所有源访问，但是由于服务器认为这样不安全，所以不允许外界携带跨域资源凭证访问（如cookie）

• “http://127.0.0.1:8080”:指定单一源访问，允许携带