03-axios create/拦截器功能

最新推荐文章于 2023-07-08 13:38:57 发布

探鱼不是鱼

最新推荐文章于 2023-07-08 13:38:57 发布

阅读量150

点赞数

分类专栏： Network

本文链接：https://blog.csdn.net/RollsRoycewk/article/details/109515824

版权

Network 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

特点

支持node端和浏览器端

支持Promise

使用

npm

npm install axios

cdn

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

GET请求

server

app.get("/user", (req, res) => {
    console.log(req.query);
 
    res.send("alert(1)");
})

axios.get(url) 方法一

<body>
    <button id="btn">发送</button>
    <script>
        const oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            axios.get('/user?ID=12345')
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    </script>
</body>

// response.data：返回的数据
// response.headers:响应头
// response.status：状态码
// response.statusText:状态信息

在这里插入图片描述

服务端返回值

app.get("/user", (req, res) => {
    console.log(req.query);
 
    // { ID: '12345' }
    res.send("alert(1)");
})

axios.get(地址,{params:{}}) 方法二

get请求，如果查询字符串写在外边需要配置在第二个参数对象中，params：{}

<body>
    <button id="btn">发送</button>
    <script>
        const oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            axios.get('/user', {
                    params: {
                        ID: 77777
                    }
                })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    </script>
</body>

在这里插入图片描述

服务端返回值

app.get("/user", (req, res) => {
    console.log(req.query);
   //{ ID: '77777' }
    res.send("alert(7)");
})

POST请求

server

app.use(express.static("./public"));
 
//获取post请求体 挂载到req上  只能处理urlencoded编码格式的请求
app.use(express.urlencoded({
    extended: true
}))
 
//获取post请求体，并挂载到req上  只能处理json字符串格式的请求
app.use(express.json());

axios.post(地址,{})

<body>
    <button id="btn">发送</button>
    <script>
        const oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            axios.post("/user", {
                    name: "rolls",
                    age: 777,
                    test:000
                }).then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    </script>
</body>

server返回值

app.post("/user", (req, res) => {
    console.log(req.body);
    // { name: 'rolls', age: 777 }
    res.send("alert(2)");
})
 

{ name: 'rolls', age: 777 }

axios原生

get

<body>
    <button id="btn">发送</button>
    <script>
        const oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            axios({
                method: "get",
                url: "/user",
                params: {
                    name: "G500",
                    age: 280,
                    w:777
                }
            }).then((data) => {
                console.log(data)
            })
        }
    </script>
</body>

POST

<body>
    <button id="btn">发送</button>
    <script>
        const oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            axios({
                method:"post",
                url:"/user",
                data:{
                    name:"库里南",
                    age:640,
                    mon:123
                }
            }).then((data) => {
                console.log(data)
            })
        }
    </script>
</body>

axios.create()

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
    <script>
      // axios.create({})返回一个新的instance(和axios功能非常相似,但不完全一样,没有取消那些之后添加的方法(源码解析))
      const instance = axios.create({
        // 基础路径(发送请求的默认路径),一键修改所有地址方便开发
        baseURL: "http://localhost:3000",
        headers: {
          // 请求头
        },
        timout: 20000, //请求超时时间ms,发送请求这个时间之后还没响应就中断这个请求
      });
      instance({
        method: "GET",
        url: "/comments",
      });
    </script>

拦截器

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
    <script>
      // create方法设置一些公共的或者默认的参数,将来发请求就会统一携带上
      const instance = axios.create({
        baseURL: "http://localhost:3000",
        headers: {
          // 请求头,公共的
        },
        timout: 20000,
      });

      // 拦截器,拦截请求,拦截器本质上就是一个中间件,帮你把数据处理一下
      // 请求拦截器
      /* 
         请求拦截器:在发送请求之前触发,一般只设置成功
       */
      instance.interceptors.request.use(
        //  成功
        (config) => {
          // config 请求相关的配置(请求地址,请求方式,请求头,请求体)

          //修改请求的配置 token不会自动保存携带,固定格式,不在这些就要在每一个请求中去写headers
          /* if (token) {
            // 不写在上面的原因是因为他有可能有有可能没有,这样的参数写在这
            config.headers.authorization = `Bearer ${token}`;
          } */

          // 必须return这个配置,否则发请求就没有配置了
          return config;
        }
        //  失败
        // () => {}
      );
      /* 
        响应拦截器:在响应返回来之后触发,readystate = 4说明响应回来了
       */
      instance.interceptors.response.use(
        // 成功 状态码2xx成功
        (response) => {
          // 状态值代码响应成功,并不代表功能成功
          /* 
                response.data是响应数据
                {
                    code:10000, // 代表功能成功
                    data:{username:xxx}
                },
                {
                    code:10001,  // 代表功能失败
                    message:"用户名或密码错误"
                }
           */
          if (response.data.code === 10000) {
            //response.data以后成功的值就直接是数据,不再需要.data
            // 代表成功,返回真正的数据,触发then方法
            return response.data.data;
          } else {
            // 代表失败---将来会触发catch
            return Promise.reject(response.data.message);
          }
        },
        // 失败 非2开头
        (error) => {}
      );

      instance({
        method: "GET",
        url: "/comments",
        // headers: {
        //   authorization: "Bearer ${token}",
        // },
      })
        .then((value) => {
          console.log(value);
        })
        .catch(() => {});
    </script>

探鱼不是鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03-axios create/拦截器功能

特点支持node端和浏览器端支持Promise使用npmnpm install axioscdn<script src="https://unpkg.com/axios/dist/axios.min.js"></script>GET请求serverapp.get("/user", (req, res) => { console.log(req.query); res.send("alert(1)");})axios.get(u
复制链接

扫一扫

专栏目录