Ajax 发请求

天神下凡_
309 阅读5分钟

服务器的概念 & 初识 Ajax

1.客户端与服务器通信的过程

2.axios的使用

3.接口文档的概念

4.network面板的使用

5.全局配置

6.拦截器

服务器

服务器的本质：也是一台电脑。

服务器的作用：

1.存储一个网站的文件（HTML、CSS、JS、图片、音乐.....）

2.提供网站的文件给用户

资源

1.服务器上的数据、网页(html文件)、图片、音乐、视频、字体文件、CSS文件、JS文件等等都称之为资源。所以资源代指服务器上存储的内容。

2.通俗的讲，我们浏览网页时，从网络当中看到的内容都叫做资源。

数据

服务器多数情况都使用数据表的方式来存储数据，和我们平时见到的表格差不多，形式如下：

image.png

客户端

概念：在前端开发中，客户端特指“Web 浏览器”。

作用：将互联网世界中的 Web 资源加载、并呈现到浏览器窗口中供用户使用。

常见的浏览器：

image.png

URL 地址

服务器上的每个资源，都对应着独一无二的URL地址

image.png

客户端与服务器通信的过程

就像我们（客户）去银行（服务场所）办理业务：

客户提出需求：客户提出要办理业务，比如办卡、存钱、取钱、销户、买纪念币等等
银行的回应：银行根据客户的需求，办理相关的业务

客户端与服务器之间的通信过程，分为请求 - 响应两个步骤。其中：

请求的概念：客户端通过网络去找服务器要资源的过程，叫做“请求”
响应的概念：服务器把资源通过网络发送给客户端的过程，叫做“响应”

image.png

什么是 Ajax

Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。

它的英文全称是 Asynchronous Javascript And XML，简称 Ajax。

image.png

使用 Ajax 请求数据的 5 种方式

image.png

axios

是前端圈最火的、专注于数据请求的库。

image.png

中文官网地址：www.axios-http.cn/

英文官网地址：www.npmjs.com/package/axi…

axios 的基础语法

image.png

GET和DELETE请求提交数据用 params

POST、PUT和PATCH请求提交数据用 data

network工具

示例

         // url:必须的，如果没有报错，它是请求地址--服务器资源地址
         // method:请求方式，如get,post,这个方式一定要参照接口文档
        
        
        //  get请求方式
         axios({
           // get方式的参数也可以在url中拼接，格式为： ?参数=值&参数=值
           url: 'http://www.baidu.com?id=10338',
           method: 'get'
         }).then(result => {
           console.log(result)
         })

        // aixos.get(url[?参数=值],[{params:{参数对象}}],{配置项}).then()
        axios.get('http://www.baidu.com', {
            // params:键只能写params
            params: { id: 11778 }
          })
          .then(result => {
            console.log(result)
          })
          
        // POST 请求方式  
        axios({
        method: 'POST',
        url: 'http://www.baidu.com',
        data: {
          key:value
        }
      }).then(result => {
        alert(result.data.message)
      })

image.png

network面板介绍

image.png

image.png

image.png

image.png

image.png

image.png

image.png

常见的状态码

200 表示从客户端发来的请求在服务器端被正常处理了。

204 表示请求处理成功，但没有资源返回。

301 表示永久性重定向。该状态码表示请求的资源已被分配了新的URI，以后应使用资源现在所指的URI。

302 表示临时性重定向。

304 表示客户端发送附带条件的请求时（指采用GET方法的请求报文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个首部）服务器端允许请求访问资源，但因发生请求未满足条件的情况后，直接返回304Modified（服务器端资源未改变，可直接使用客户端未过期的缓存）

400 表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。

401 表示未授权（Unauthorized)，当前请求需要用户验证

403 表示对请求资源的访问被服务器拒绝了

404 表示服务器上无法找到请求的资源。除此之外，也可以在服务器端拒绝请求且不想说明理由时使用。

500 表示服务器端在执行请求时发生了错误。也有可能是Web应用存在的bug或某些临时的故障。

503 表示服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。

axios全局配置

在 url 地址中，协议://域名:端口 对应的部分叫做“请求根路径”。

全局配置请求根路径的好处：提高项目的可维护性。全局配置根路径后，后续所有的请求都可以使用全局配置的根路径

基于 axios 提供的固定配置，即可轻松配置请求的根路径。语法格式如下：

axios.defaults.baseURL = '请求根路径'

拦截器

拦截器（interceptors）用来全局拦截 axios 的每一次请求与响应

好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。

image.png

使用拦截器 - 实现 loading 效果
/* 图片样式 */
    .loading {
      position: absolute;
      width: 300px;
      height: 300px;
      left: 500px;
      top: 300px;
      background-color: #ccc;
      display: none;
    }
    
<!-- 拦截器图片 -->
 <img src="./img/loading.gif" alt="" class="loading">


// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    document.querySelector('.loading').style.display = 'block'
    return config;
}, function (error) {
    // 对请求错误做些什么
    alert('请求出错啦')
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    document.querySelector('.loading').style.display = 'none'
    return response;
}, function (error) {
    // 对响应错误做点什么
    document.querySelector('.loading').style.display = 'none'
    return Promise.reject(error);
});
avatar
文章
阅读
粉丝