axios的基本特性用法

1. axios的基本特性

axios 是一个基于Promise用于浏览器和node.js的HTTP客户端。

它具有以下特征:

  • 支持浏览器和node.js
  • 支持promiseAPI
  • 自动转换JSON数据
  • 能拦截请求和响应请求
  • 转换请求数据和响应数据(请求是可以加密,在返回时也可进行解密)
2. axios的基本用法
//客户端请求
axios.get('http://localhost:3000/adata')
        .then(ret =>{
            //data属性名称是固定的,用于获取后台响应的数据
            console.log(ret.data)
        })
//服务器端响应
app.get('/adata', (req, res) => {
  res.send('Hello axios!')
})
  • 服务器端响应的是ret对象
  • data属性是我们需要的数据,获取方法:ret.data(对象.属性名)
3. axios的常用API
  • get:查询数据
  • post:添加数据
  • put:修改数据
  • delete:删除数据
4. axios的参数传递🔥
4.1 get传递参数
第一种方式
  • 通过URL传递参数

    • 1. 传统url地址 通过?传参

      //客户端请求

      <body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> //axios get传统url地址请求传参 axios.get('http://localhost:3000/axios?id=123') .then(function (ret) { console.log(ret.data) }) </script> </body> //服务器响应 app.get('/axios', (req, res) => { res.send('axios get 传递参数' + req.query.id) })
  • 2. 通过restful形式的url(用params接收参数)

    //客户端请求

    <body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> //axios getrestful形式的url请求传参 axios.get('http://localhost:3000/axios/456').then(function(ret){ console.log(ret.data) }) </script> </body> //服务器响应 app.get('/axios/:id', (req, res) => { res.send('axios get (Restful) 传递参数' + req.params.id) })
第二种方式
  • 通过params选项传递参数(比较方便,传递多个参数的 时候)

    //客户端请求

    <body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> //axios get通过params选项传递参数 axios.get('http://localhost:3000/axios', { params: { id: 789 } }).then(function (ret) { console.log(ret.data) }) </script> </body> //服务器响应 app.get('/axios', (req, res) => { res.send('axios get 传递参数' + req.query.id) })
4.2 delete传递参数

参数传递方式和get相似(两种)

  • 通过url地址传参
    • 传统url地址 通过?传参
    • restful形式的url(用params接收参数)
  • 通过params(用query接收参数)
4.3 post传递参数
第一种方式
  • 通过选项传递参数(默认传递的是json格式的数据

    //客户端请求

    <body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> //axios post传递参数 axios.post('http://localhost:3000/axios', { uname: 'xuhui那束光', pwd: 123 }).then(function (ret) { console.log(ret.data) }) </script> </body> //服务器响应 app.post('/axios', (req, res) => { res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd) })
  • 提交的数据格式是JSON形式,需要服务器端提供JSON支持🔥

    //服务器端支持
    app.use(bodyParser.json());

第二种方式
  • 通过URLsearchParams传递参数(application/x-www-for,-urlencoded

    //客户端请求

    <body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> //axios post传递参数 var params = new URLSearchParams(); params.append('uname', 'xuhui那束光'); params.append('pwd', '5555'); axios.post('http://localhost:3000/axios', params).then(function(ret){ console.log(ret.data) }) </script> </body> //服务器响应 app.post('/axios/:id', (req, res) => { res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd) })
  • 提交的数据格式为字符串形式

4.4 put传递参数

参数传递方式与post相似(选项传参和URLsearchParams传参)

//客户端请求
<body>
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    //axios put 请求传参
    axios.put('http://localhost:3000/axios/123', {
      uname: 'xuhui那束光',
      pwd: 123
    }).then(function (ret) {
      console.log(ret.data)
    })
  </script>
</body>
//服务器响应
app.put('/axios/:id', (req, res) => {
  res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})
5.axios的响应结果

响应结果的主要属性:

  • data:实际响应回来的数据
  • headers:响应头信息
  • status:响应状态码
  • statusText:响应状态信息
axios.get('http://localhost:3000/axios').then(function (ret) {
      console.log(ret)
})
  • data绝大多数场景返回来的是JSON形式的数据🔥

    //向服务器请求JSON接口
    axios.get('http://localhost:3000/axios-json').then(function (ret) {
    console.log(ret.data.uname)
    })
    //服务器端准备一个JSON接口
    app.get('/axios-json', (req, res) => {
    res.json({
    uname: 'xuhui',
    age: 12
    });
    })

  • data是大对象ret里面的小对象🔥

通过 对象.属性名(data.uname) 可以获取对应的值

6. axios的全局配置

在发送请求前,可以做一些配置信息

  • axios.defaults.timeout = 3000;//响应超时时间
  • axios.defaults.baseURL = 'http://localhost:3000/app';//默认地址
  • axios.defaults.headers[ ' mytoken' ] = 'aqwerarwrqrwqr' //设置请求头
1. 默认地址演示🔥
// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';
//向服务器请求JSON接口
axios.get('axios-json').then(function (ret) {
      console.log(ret.data.uname)
})

//服务器端准备一个JSON接口
app.get('/axios-json', (req, res) => {
  res.json({
    uname: 'xuhui',
    age: 12
  });
})
2. 设置请求头
// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';
// 配置请求头信息
axios.defaults.headers['mytoken'] = 'hello';
//向服务器请求JSON接口
axios.get('axios-json').then(function (ret) {
    console.log(ret.data.uname)
})

//服务器端准备一个JSON接口
app.get('/axios-json', (req, res) => {
  res.json({
    uname: 'xuhui',
    age: 12
  });
})
  • 对于跨域请求来说,请求头是需要后台进行配置的
7. axios拦截器
1.请求拦截器🔥
  • 在请求发出之前设置一些信息

    //axios请求拦截器
    axios.interceptors.request.use(function(config) {
    console.log(config.url)
    config.headers.mytoken = 'nihao';
    return config;
    }, function(err){
    console.log(err)
    })
    //向服务器发起请求
    axios.get('http://localhost:3000/adata').then(function(data){
    console.log(data)
    })

2.响应拦截器🔥
  • 在获取数据之前对数据做一些加工处理

    //axios响应拦截器
    axios.interceptors.response.use(function(res) {
    console.log(res)
    return res;
    }, function(err){
    console.log(err)
    })
    //向服务器发起请求
    axios.get('http://localhost:3000/adata').then(function (data) {
    console.log(data)
    })

  1. (25行拦截器打印的信息 res)和 (31行最终需要的数据 ) 打印的信息是完全一样的。
  2. 但是,响应拦截器res中拿到的不是具体数据
  • 在调用接口时,只关心实际的数据,不需要包装数据的对象,可以在设置拦截器内容,对接收到的数据进行处理加工🔥
  • 最后拿到的data是经过响应拦截器处理后的数据
  • 注:文中部分内容来源于网络,联系侵删
相关推荐
川石教育6 小时前
Vue前端开发-缓存优化
前端·javascript·vue.js·缓存·前端框架·vue·数据缓存
╰つ゛木槿12 小时前
深入了解 React:从入门到高级应用
前端·react.js·前端框架
GIS开发特训营15 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood16 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
哑巴语天雨1 天前
React+Vite项目框架
前端·react.js·前端框架
码农老起1 天前
掌握 React:组件化开发与性能优化的实战指南
react.js·前端框架
撸码到无法自拔1 天前
React:组件、状态与事件处理的完整指南
前端·javascript·react.js·前端框架·ecmascript
Domain-zhuo1 天前
如何利用webpack来优化前端性能?
前端·webpack·前端框架·node.js·ecmascript
web150850966412 天前
【React&前端】大屏适配解决方案&从框架结构到实现(超详细)(附代码)
前端·react.js·前端框架
Cachel wood2 天前
Vue.js前端框架教程8:Vue消息提示ElMessage和ElMessageBox
linux·前端·javascript·vue.js·前端框架·ecmascript